Primitive / Atomstable

Input

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

@glinui/uiComponent: input

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add input

Usage

Default

TSX

1import { Input } from "@glinui/ui"
2
3export function Demo() {
4  return <Input placeholder="name@example.com" />
5}

Glass

TSX

1import { Input } from "@glinui/ui"
2
3export function Demo() {
4  return <Input variant="glass" placeholder="Glass input" />
5}

Liquid + Matte

TSX

1import { Input } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <Input variant="liquid" placeholder="Liquid input" />
7      <Input variant="matte" placeholder="Matte input" />
8    </div>
9  )
10}

Underline

TSX

1import { Input } from "@glinui/ui"
2
3export function Demo() {
4  return <Input variant="underline" placeholder="Underline input" />
5}

Filled

TSX

1import { Input } from "@glinui/ui"
2
3export function Demo() {
4  return <Input variant="filled" placeholder="Filled input" />
5}

Ghost

TSX

1import { Input } from "@glinui/ui"
2
3export function Demo() {
4  return <Input variant="ghost" placeholder="Ghost input" />
5}

Accessibility

Native `input` semantics.
Visible focus ring on `:focus-visible`.
Pair with `<label>` or `aria-label` for screen readers.

Keyboard Interactions

Key	Action
`Tab`	Move focus to the input.

ARIA Attributes

`role="textbox"` native
`aria-invalid` for validation

Reduced Motion

Focus transitions use tokenized timing.

Affected properties

border-colorbox-shadow

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost" \| "underline" \| "filled"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Height scale.
`type`	`string`	-	`text`	HTML input type.
`disabled`	`boolean`	-	`false`	Disables interaction.
`placeholder`	`string`	-	`-`	Placeholder text.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Input } from "@glinui/ui"

Source Files

input.tsx

input.test.tsxtest

Dependencies

@glinui/ui

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.