Input
The Input component is a fundamental piece of UI that allows users to input text into your application. It supports a variety of types including text, password, email, etc. Additionally, it provides customizable options such as adornments, size, loading state, error state, and more. Checkout usage in Field component.
Playground
Use the playground below to explore the different options available for the Input component:
Width
Please note that the Input component dynamically adjusts its width based on the length of its content. To set a fixed width, you can provide your own width constraints via a custom wrapper or by passing a class to the className prop:
//example with tailwindcss custom width
<Input cx={{ container: 'w-[200px]' }} />Input Adornments
Adornments are icons or other elements that can be added to the start or end of the Input component for additional interactivity or visual feedback:
Interactive icon
You can also use an interactive icon with the Input component, such as a visibility toggle for password fields:
Component API
Refer to the props table below for a detailed list of all properties that you can use to customize the Input component. In addition to these, it accepts all properties applicable to the native input HTML element:
Rest of the props are the same as for the native ,[object Object], ,component.
| Prop | Default | Description |
variant | outlined | contained | outlined | textVariant of the element |
required | — | booleanIs element required? |
readOnly | — | booleanIs element read-only? |
label | — | stringInput label |
disabled | — | booleanIs disabled? |
startAdornment | — | React.ReactNodeIcon on the left side of the component |
endAdornment | — | React.ReactNodeIcon on the right side of the component |
helperText | — | stringAdditional information for display with component |
cx | — | {
input?: 'string',
container?: {
inner?: 'string',
outer?: 'string',
}
}Class names manipulation API. Each property ("input", "label", etc.) is assigned to different Input component |