Input
Input components are used to collect user input, such as text, numbers, and other data. They are commonly used in forms, search bars, and other interactive elements.
This is an input field.
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...Variants
Section titled “Variants”default
This is an input field.
Loading Code Block...Disabled
Section titled “Disabled”default
This is an input field.
Loading Code Block...Error Input
Section titled “Error Input”default
input error
Loading Code Block...Helper Text Icon
Section titled “Helper Text Icon”info
This is an input field.
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| variant | - | 'default' | 'currency' | 'mobile-number' | 'select' | 'counter | 'search' | 'otp' | 'date' | 'rich-text-input' | The variant of the input component. |
| label | - | string | Label for the input component. |
| placeholder | - | string | Placeholder text for the input field. |
| disabled | false | boolean | Disables the input component. |
| helperText | - | string | Helper text displayed below the input field. |
| helperTextIconType | info | 'info' | 'warning' | Icon type for the helper text. |
| error | false | boolean | Indicates if the input has an error state. |
| required | false | boolean | Indicates if the input is required. |
Counter Props
Section titled “Counter Props”| Props | Default | Type | Description |
|---|---|---|---|
| min | 100 | number | Lowest number on the counter . |
| max | 1000 | number | Highest number on the counter. |
| value | 0 | number | Current value of the counter. |
| controlsPosition | center | 'center' | 'right' | Position of the character counter. |
| step | 1 | number | Step value for the counter. |
Currency Props
Section titled “Currency Props”| Props | Default | Type | Description |
|---|---|---|---|
| currency | GHS | string | Currency code for the input. |
| endsWithZeros | false | boolean | Indicates if the currency input should end with zeros. |
| hint | - | string | Hint text for the currency input tooltip. |
Mobile Number Props
Section titled “Mobile Number Props”| Props | Default | Type | Description |
|---|---|---|---|
| countryCodeDisplayType | country-code | 'code' | 'flag | Type of mobile number input, either 'country-code' or 'flag'. |
| intl | false | boolean | Indicates if the mobile number input should support international formats. |
Date Props
Section titled “Date Props”| Props | Default | Type | Description |
|---|---|---|---|
| mode | single | 'sigle' | 'range' | Mode of the date input, either 'single' or 'range'. |
| placeholder | - | string | Placeholder text for the date input. |
| allowPastDate | false | boolean | Allows selection of past dates. |
| minDate | - | string | Minimum date allowed for the input. |
| maxDate | - | string | Maximum date allowed for the input. |
| maxSelectableMonths | 3 | number | Maximum number of months that can be selected in the date input. |
OTP Props
Section titled “OTP Props”| Props | Default | Type | Description |
|---|---|---|---|
| inputLength | 3 | number | Length of the OTP input. |
| hint | - | string | Hint text for the OTP tooltip. |
Rich Text Input Props
Section titled “Rich Text Input Props”| Props | Default | Type | Description |
|---|---|---|---|
| editorHeight | 100px | string | Height of the rich text input editor. |
Search Props
Section titled “Search Props”| Props | Default | Type | Description |
|---|---|---|---|
| rightIcon | - | ReactNode | Show right icon for the search input. |
| leftIcon | - | ReactNode | Show left icon for the search input. |
Select Props
Section titled “Select Props”| Props | Default | Type | Description |
|---|---|---|---|
| options | - | Array<{ label: string, value: string }> | Array of options for the select input. |
| multiple | false | boolean | Allows multiple selections. |
| showSearch | false | boolean | Shows a search input within the select dropdown. |
| searchable | false | boolean | Allows searching within the select options. |
| clearable | false | boolean | Allows clearing the selected option. |