- Components
- Input
Input
Single-line text field for general data entry.
Demo
Installation
terminal
With label
Input Group
Input groups allow you to compose inputs with leading or trailing elements such as icons, prefixes, suffixes, or actions.
When using
<InputGroup> , the <Input> component must have variant prop to unstyled.- Always set
variant='unstyled'to the input - Never pass label to the input
- Styling and layout are handled by the group container
Leading
Trailing
Trailing elements are commonly used for icons, units, or contextual hints. Use
InputTrailing for this purpose.In some cases, the trailing/leading element can be visually separated and styled as part of the control. As you can see in given examples.