All components
Input
Text fields with outline, subtle, and flushed variants that inherit your palette and radius.
Variants
outline
subtle
flushed
Sizes
xs
sm
md
lg
xl
Install
zsh — input
1bunx stylexblocks add inputUsage — Base UI
input.tsx
1234567891011121314151617import { Input } from "#components/ui/base-ui/input.tsx";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe and are exposed as data-variant / data-size attributes */} <Input variant="outline" size="md" placeholder="Email address" />
{/* native props merge through mergeProps */} <Input variant="subtle" type="email" required aria-label="Email" />
{/* composition: the render prop replaces the underlying element */} <Input variant="flushed" render={<input inputMode="numeric" />} /> </> );}