On this page

Input

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

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

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

export function Example() {
  return (
    <Input placeholder="Type something..." />
  );
}

Installation

pnpx starwind@latest add input

npx starwind@latest add input

yarn dlx starwind@latest add input

Framework Availability

Astro Available React Available

Input is available for Astro and React.

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

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Input

Inherits input attributes. Omits `children`, `defaultValue`, `size`, and `value`.

Contains the following additional props:

Prop Type Default

defaultValue string | number | string[] —

Description: Sets the initial value when the component is uncontrolled.
Classification: Primitive override
Primitive prop: input.Root.defaultValue

size "sm" | "md" | "lg" "md"

Description: Selects the component's visual size.
Classification: Styled variant

value string | number | string[] —

Description: Controls or identifies the component value.
Classification: Primitive override
Primitive prop: input.Root.value

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Input.

Primitive API

Input Primitive

Runtime API

Input primitive: createInput from @starwind-ui/runtime/input

Changelog

v2.0.0

Rebuilt Input on Starwind Runtime for value synchronization while retaining native input attributes.
See the Input Primitive for the underlying unstyled anatomy and behavior API.

v1.3.3

Refactor tailwind variants functions into separate variants.ts file

v1.3.1

add aria-invalid styling

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.