Primitive / Atomstable

Input

Single-line input with glass, liquid, matte, and utility variants.

@glinui/uiComponent: input

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add input

Usage$

TSX

1import { Input } from "@glinui/ui"
2
3export function InputBasicDemo() {
4return <Input aria-label="Basic input" placeholder="Enter text..." />
5}

Examples$

Sizes$

TSX

1import { Input } from "@glinui/ui"
2
3export function InputSizesDemo() {
4return (
5  <div className="space-y-3">
6    <Input size="sm" aria-label="Small input" placeholder="Small input" />
7    <Input size="md" aria-label="Medium input" placeholder="Medium input" />
8    <Input size="lg" aria-label="Large input" placeholder="Large input" />
9  </div>
10)
11}

Surface Variants$

TSX

1import { Input } from "@glinui/ui"
2
3export function InputVariantsDemo() {
4return (
5  <div className="space-y-3">
6    <Input variant="default" aria-label="Default input" placeholder="Default" />
7    <Input variant="glass" aria-label="Glass input" placeholder="Glass" />
8    <Input variant="liquid" aria-label="Liquid input" placeholder="Liquid" />
9    <Input variant="matte" aria-label="Matte input" placeholder="Matte" />
10    <Input variant="outline" aria-label="Outline input" placeholder="Outline" />
11    <Input variant="filled" aria-label="Filled input" placeholder="Filled" />
12  </div>
13)
14}

Disabled$

TSX

1import { Input } from "@glinui/ui"
2
3export function InputDisabledDemo() {
4return <Input aria-label="Disabled input" disabled placeholder="Disabled input" />
5}

With Placeholder$

TSX

1import { Input } from "@glinui/ui"
2
3export function InputPlaceholderDemo() {
4return <Input aria-label="Search input" placeholder="Search anything..." />
5}

Password Type$

TSX

1import { Input } from "@glinui/ui"
2
3export function InputPasswordDemo() {
4return <Input aria-label="Password input" type="password" placeholder="Enter password..." />
5}

Accessibility$

Always associate an <Input> with a visible <label> or provide an aria-label.
Placeholder text is not a label; treat it as a hint only.
The type prop maps directly to the native input element, enabling built-in browser behaviors (e.g., type="email" triggers mobile keyboards).
Disabled inputs are announced as such by screen readers via the native disabled attribute.

Reduced Motion$

Input does not use animation to communicate state changes; focus and hover styles are purely visual.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from inputVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost" \| "underline" \| "filled"`	No	`"default"`	Variant option from inputVariants.

Source$

TSX

1import { Input } from "@glinui/ui"

packages/ui/src/components/input.tsx

packages/ui/src/tests/input.test.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/input.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

InputProps

`InputProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from inputVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost" \| "underline" \| "filled"`	No	`"default"`	Variant option from inputVariants.