Glin UI
Radix UIBase UI
Primitive / Atom

Input

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

Edit on GitHub

Create your account

Free for teams up to five people. No card needed.

Shown on invoices and in your team directory.

glin.app/mayachen is available

Installation

Install from
pnpm dlx @glinui/cli@latest add input

Prefer the package?

Usage

Variants

glinr (default) is the inset well, plain is the flat shadcn field. Each state is AA readable on every stage backdrop.

import { Input } from "@glinui/ui"



export function Demo() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <Input variant="glinr" placeholder="glinr" />
      <Input variant="solid" placeholder="solid" />
      <Input variant="plain" placeholder="plain" />
      <Input variant="soft" placeholder="soft" />
      <Input variant="outline" placeholder="outline" />
      <Input variant="ghost" placeholder="ghost" />
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Input } from "@glinui/ui"



export function Demo() {
  return (
    <Input variant="glass" placeholder="Glass input" />
  )
}

States and sizes

Empty, filled, invalid, disabled and the size scale, all labelled through Field.

import { Field, FieldControl, FieldError, FieldLabel, Input } from "@glinui/ui"



export function InputStatesDemo() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field>
        <FieldLabel>Default</FieldLabel>
        <FieldControl><Input placeholder="Search projects" /></FieldControl>
      </Field>
      <Field>
        <FieldLabel>With value</FieldLabel>
        <FieldControl><Input defaultValue="Atlas redesign" /></FieldControl>
      </Field>
      <Field invalid>
        <FieldLabel>Invalid</FieldLabel>
        <FieldControl><Input defaultValue="not-an-email" /></FieldControl>
        <FieldError>Enter a valid email address.</FieldError>
      </Field>
      <Field disabled>
        <FieldLabel>Disabled</FieldLabel>
        <FieldControl><Input defaultValue="Locked by an admin" /></FieldControl>
      </Field>
      <Field>
        <FieldLabel>Small</FieldLabel>
        <FieldControl><Input size="sm" placeholder="Compact" /></FieldControl>
      </Field>
      <Field>
        <FieldLabel>Large</FieldLabel>
        <FieldControl><Input size="lg" placeholder="Roomy" /></FieldControl>
      </Field>
    </div>
  )
}

Sizes

import { Input } from "@glinui/ui"

export function InputSizesDemo() {
  return (
    <div className="space-y-3">
      <Input size="sm" aria-label="Small input" placeholder="Small input" />
      <Input size="md" aria-label="Medium input" placeholder="Medium input" />
      <Input size="lg" aria-label="Large input" placeholder="Large input" />
    </div>
  )
}

Surface Variants

import { Input } from "@glinui/ui"

export function InputVariantsDemo() {
  return (
    <div className="space-y-3">
      <Input variant="default" aria-label="Default input" placeholder="Default" />
      <Input variant="glass" aria-label="Glass input" placeholder="Glass" />
      <Input variant="liquid" aria-label="Liquid input" placeholder="Liquid" />
      <Input variant="matte" aria-label="Matte input" placeholder="Matte" />
      <Input variant="outline" aria-label="Outline input" placeholder="Outline" />
      <Input variant="filled" aria-label="Filled input" placeholder="Filled" />
    </div>
  )
}

Disabled

import { Input } from "@glinui/ui"

export function InputDisabledDemo() {
  return <Input aria-label="Disabled input" disabled placeholder="Disabled input" />
}

With Placeholder

import { Input } from "@glinui/ui"

export function InputPlaceholderDemo() {
  return <Input aria-label="Search input" placeholder="Search anything..." />
}

Password Type

import { Input } from "@glinui/ui"

export function InputPasswordDemo() {
  return <Input aria-label="Password input" type="password" placeholder="Enter password..." />
}

Accessibility

  • Native `input` semantics.
  • Visible focus ring on `:focus-visible`.
  • Pair with `<label>` or `aria-label` for screen readers.
  • 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.

Keyboard Interactions

KeyAction
TabMove focus to the input.

ARIA Attributes

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

Reduced Motion

Focus transitions use tokenized timing.

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

Affected properties

border-colorbox-shadow

API Reference

PropTypeRequiredDefaultDescription
variantControlVariantPropNoambient (glinr)Surface look. Omit to follow the ambient design style: glinr is an inset well with a gradient hairline ring, plain is a flat shadcn field. Glass is opt-in.
sizeunknownNomdHeight scale.
typestring-textHTML input type.
disabledboolean-falseDisables interaction.
placeholderstring--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

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

InputProps

InputProps

PropTypeRequiredDefaultDescription
sizeunknownNo"md"Variant option from inputSizeVariants.
variantControlVariantPropNo-Surface look. Omit to follow the ambient design style (glinr = inset well, minimal = plain). Also: solid, plain, soft, outline, ghost, glass (opt-in, needs a backdrop), plus the legacy liquid, matte, frosted, underline, filled.