Component
Input
Text inputs with labels, hints, errors, prefix/suffix slots, and the signature neo-brutalist focus effect.
Default
We'll never share your email.
Input with label and hint
tsx
<Input
label="Email Address"
placeholder="you@example.com"
hint="We'll never share your email."
/>
Variants
Default vs Outline
tsx
<Input variant="default" label="Default" placeholder="White background" />
<Input variant="outline" label="Outline" placeholder="Transparent background" />
Sizes
Small, medium, and large
tsx
<Input size="sm" label="Small" placeholder="Small input" />
<Input size="md" label="Medium" placeholder="Medium input" />
<Input size="lg" label="Large" placeholder="Large input" />
Error State
Password must be at least 8 characters.
Error styling with message
tsx
<Input
label="Password"
type="password"
placeholder="••••••••"
error="Password must be at least 8 characters."
/>
Disabled
Disabled input
tsx
<Input
label="Disabled"
placeholder="Cannot type here"
disabled
/>
Prefix & Suffix
https://
🔍
Input with prefix and suffix slots
tsx
<Input
label="Website"
prefix={<span>https://</span>}
placeholder="example.com"
/>
<Input
label="Search"
suffix={<span>🔍</span>}
placeholder="Type to search..."
/>
Full Width
Input stretches to fill container
tsx
<Input label="Full Width" placeholder="Takes all space" fullWidth />
Usage
LoginForm.tsx
import { Input, Button } from 'starkit-ui';
function LoginForm() {
return (
<form>
<Input
label="Email"
type="email"
placeholder="you@example.com"
fullWidth
/>
<Input
label="Password"
type="password"
placeholder="••••••••"
error={errors.password}
fullWidth
/>
<Button type="submit" fullWidth size="lg">
Sign In
</Button>
</form>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'default' | Visual variant controlling background style. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size preset controlling height and font size. |
| label | string | — | Label text displayed above the input. |
| hint | string | — | Hint text displayed below the input. |
| error | string | — | Error message. Overrides hint and applies error styling. |
| disabled | boolean | false | Disables the input. |
| fullWidth | boolean | false | Stretches the input to fill its container. |
| prefix | ReactNode | — | Element rendered inside the input, before the text. |
| suffix | ReactNode | — | Element rendered inside the input, after the text. |
| className | string | '' | Additional CSS classes merged onto the container. |
All standard <input> HTML attributes are also supported (except size, prefix, suffix which are overridden).