Related components
Input is the lowest-level input component for text and number types.
Inputs should be accompanied by labels, so rather than using Input directly in a UI, it’s normally best to use a field component, which combines an Input with a Label and displays validation errors. If none of the existing field components suit your needs, it might be worth adding a new one.
Input accepts a subset of the types that an HTML input element because we have more specialised components for the others (e.g. Checkbox, Radio).
<Input placeholder="Placeholder text" className="w-75" />
All components that use input accept four size variants: "sm" | "md" | "lg" | "xl"
<div className="flex flex-col">
<Input placeholder="Small variant" className="w-75" size="sm" />
<Input placeholder="Medium variant" className="w-75 mt-2" size="md" />
<Input placeholder="Large variant" className="w-75 mt-2" size="lg" />
<Input placeholder="XL variant" className="w-75 mt-2" size="xl" />
</div>
Accessibility
While Input accepts "number" for its type prop, this does not render <input type="number"/>. Instead, it renders <input type="text" inputmode="numeric" pattern=[0-9]*/> to tell browsers to show a numeric keyboard while avoiding the UX and accessibility problems associated with type="number".