Input
Take user input with the help of input fields
Source ↗️ Report Issue ↗️Input elements are crucial for creating interactive, functional, and user-friendly forms and interfaces. Use the Input
component for data collection, such as text or email input, or use them for interactive experiences, such as search or filtering functionality.
The Input
component can accept any native HTML attribute, along with some other custom props described in this documentation.
Labeled Inputs
Inputs can also be created with labels using the label
prop. Optionally, additional text can be displayed using the subText
prop:
Themes
Inputs come with five different built in themes that can be configured with the theme
prop: info
, success
, warning
, alert
, and fill
:
Additional styles can be applied using the className
prop.
Inputs with Icons
You can create inputs with icons by passing an SVG icon as the children to the component:
To set the color of the icon, you can:
- Specify the
color
prop on theIcon
component. - Pass a
className
prop to theInput
to style it via CSS. - Pass a colored SVG icon as the children.
API
Prop | Purpose |
---|---|
label | Set a label for the input. |
subText | Specify additional text below the input. The string can include HTML tags. |
className | Pass additional CSS classes for the input. |
theme | Specify the theme of the input. |
Svelte & React Prop | Purpose |
---|---|
onChange | Attach on-change event listeners. |
onKeyUp | Attach on-keyup event listeners. |
onInput | Attach on-input event listeners. |
Request improvement for this page