Input
A text input component UI is a widely used element in web and mobile applications for capturing short, single-line text input from users. It is typically used for things like collecting names, emails, search queries, or any other type of single-line text data.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Label
Helper text
Usage
import { Input } from 'bio-bind-ui';<Input
endAddon=''
endIcon=''
errorText='Error text'
helperText='Helper text'
id=''
label='Label'
maxLength={255}
mode='light'
name='input'
onChange={() => {}}
placeholder='Placeholder'
radius='none'
size='sm'
startAddon=''
startIcon=''
style={{}}
type='text'
value=''
variant='border'
/>Examples
AddOns
Add-ons can be used to provide extra information, tools, or actions associated with the input component.
Label
https://
.com
Helper text
Variant
Use variant for change the variant of input component: border, background and line
Label
Helper text
Label
Helper text
Label
Helper text
IsError
Whether the input is in error state or not
Label
Error text
Size (Optional)
Use size for change the size of input component: sm, md and lg
Label
Helper text
Label
Helper text
Label
Helper text
Props
| Props | Required | Default | Type | Description |
|---|---|---|---|---|
| variant | false | border | border background line | Specifies the variant of the input (e.g., border, background, or line). |
| type | false | text | "text number password | The type of the input (e.g., text, number, or password). |
| size | false | md | sm md lg | The size of the input component (e.g., small, medium, or large). |
| onChange | true | - | (event: React.ChangeEvent<HTMLInputElement>) => void | The event handler for the input’s change event. |
| value | true | - | string | The value of the input field. |
| placeholder | true | - | string | The placeholder text for the input field. |
| showCount | false | false | boolean | A flag indicating whether to show the character count in the input field. |
| maxLength | false | 100 | number | The maximum number of characters allowed in the input field. |
| helperText | false | - | string | The helper text that appears under the input field to provide extra guidance to the user. |
| isError | false | false | boolean | A flag indicating whether the input is in an error state (e.g., showing an error message). |
| errorText | false | - | string | The error text displayed when the input has an error. |
| radius | false | md | none xs sm md lg xl full | The border radius of the input (e.g., none, small, medium, large, etc.). |
| startIcon | false | - | React.ReactNode | The icon to display at the start of the input (e.g., a search icon). |
| endIcon | false | - | React.ReactNode | The icon to display at the end of the input (e.g., a clear or password visibility icon). |
| startAddon | false | - | React.ReactNode | The addon to display at the start of the input (e.g., a currency symbol). |
| endAddon | false | - | React.ReactNode | The addon to display at the end of the input (e.g., a unit or percentage sign). |
| label | false | - | string | The label text for the input field. |
| disabled | false | false | boolean | A flag indicating whether the input is disabled and cannot be interacted with. |
| required | false | false | boolean | A flag indicating whether the input is required in a form. |
| style | false | - | React.CSSProperties | The custom styles for the input component. |
| mode | false | light | dark light | Specifies the mode of the input (e.g., dark or light). |
| id | false | - | string | The unique identifier for the input element. |
| name | false | - | string | The name attribute of the input element, often used in form submissions. |