Input
An element used to create interactive controls for web-based forms in order to accept data from the user.
Features
- Comes in bordered and underlined variants
- Supports adding a postfix
- Formik wrapper available
Examples
Variants
The variant prop modifies the component's appearance. Typically, use the default variant. Only use the underlined variant when the Input lacks a label and the default bordered variant would add significant visual clutter.
Postfix
Used to show e.g. a search icon or a currency inside the input.
Skeleton
The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.
Related components
- Currency input: An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
- Date input: A means of inputting a date - either in a textfield or using a date picker interface.
- Search: An input that allow users to find content by entering a search term.
- Select: A form component used to select data from a list.
- Textarea: A form element that allows users to enter text on multiple lines.