Input
The Input component allows users to enter and edit text. It supports labels, error messages, and optional prefix or suffix elements.
Default
Basic input with label.
<Input id="name" label="Name" placeholder="Enter your name" />Prefix and suffix
Add a prefix or suffix for clarity or context.
https://
MAU
<Input id="site" label="Website" placeholder="yourdomain.com" prefix="https://" /><Input id="users" label="Monthly active users" placeholder="0.00" suffix="MAU" />Error
Display an error message below the input.
Email address is required.
<Input id="email" label="Email" placeholder="name@example.com" error="Email address is required." />Disabled
Make the input non-interactive.
<Input id="readonly" label="Read only" placeholder="Disabled field" disabled />Search
An example of a search input using a prefix icon.
<Input id="search" label="Search" placeholder="Search something..." prefix={<Search size={16} />} />Accessibility
The input includes an accessible label, visible focus ring, and supports keyboard navigation.