Input

---
import { Input } from "@/components/starwind/input";
---

<Input placeholder="Type something..." />

Installation

pnpx starwind@latest add input

npx starwind@latest add input

yarn dlx starwind@latest add input

Usage

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

Input

A versatile input component with multiple sizes and states.

<Input size="md" type="text" placeholder="Enter text" />

Additional Notes:

• This component accepts all HTML input attributes, such as id, name, value, etc.

Changelog

v1.3.0

• style and focus state updates

v1.2.0

• Add data-slot attribute to enable global styling updates

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 VariantProps from tailwind-variants. This provides greater type safety and cleans up component frontmatter.

v1.1.0

• tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.