Overview
Input 19 is a numeric currency input component with increment/decrement chevron buttons. It features a styled text input for currency values alongside two vertically stacked arrow buttons (up and down carets) that allow users to adjust the value. The component includes a label, focus state with shadow highlight, validation error state with red border, and a disabled/non-clickable state with reduced opacity.
How to use
Open the Brikl panel
Navigate to the Elements category in the Brikl panel.
Copy the component
Find Input 19 and click Copy.
Paste into your editor
Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows), or right-click on the canvas and select Paste.
States
This component includes conditional states that automatically change its appearance.
| State | Trigger | Visual effect |
|---|
| Focused | When the input field is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5) with 3px spread) around the input group |
| Invalid | When the input field value is not valid | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the input group |
| Disabled (Input Group) | When the input element is not clickable | The entire input group opacity is reduced to 50% |
| Up Button Hovered | When the up chevron button is hovered | Background color changes to rgba(245,244,244,1) with ease transition |
| Up Button Disabled | When the up chevron button is not clickable | Opacity of the up button is reduced to 50% |
| Down Button Hovered | When the down chevron button is hovered | Background color changes to rgba(245,244,244,1) with ease transition |
| Down Button Disabled | When the down chevron button is not clickable | Opacity of the down button is reduced to 50% |
These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.
Requirements
| |
|---|
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
| Platform | Supported |
|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component is available on the free plan.
