Input
---import { Input } from "@/components/starwind/input";---
<Input placeholder="Type something..." />Installation
pnpx starwind@latest add inputnpx starwind@latest add inputyarn dlx starwind@latest add inputUsage
size
---import { Input } from "@/components/starwind/input";---
<Input size="sm" placeholder="Small input" /><Input size="md" placeholder="Medium input" /><Input size="lg" placeholder="Large input" />disabled
---import { Input } from "@/components/starwind/input";---
<Input disabled placeholder="Disabled input" /><Input disabled value="Disabled with value" />with type
---import { Input } from "@/components/starwind/input";---
<Input type="email" placeholder="Email input" /><Input type="password" placeholder="Password input" /><Input type="number" placeholder="Number input" /><Input type="file" />API Reference
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
The component also accepts all standard HTML attributes for the <input> element.
Changelog
v1.1.1
- Add eslint disable comment for allowing the label to not have an associated control (this is user responsibility)
- Adjust component to use type
VariantPropsfromtailwind-variants. This provides greater type safety and cleans up component frontmatter.
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.