Field

Glass text inputs, with labels, descriptions and errors, fieldsets and forms.

For your receipts.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/field

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Field, Input } from "@/components/liquikit/field"

<Field.Root>
  <Field.Label>Email</Field.Label>
  <Input type="email" placeholder="you@example.com" />
  <Field.Description>For your receipts.</Field.Description>
</Field.Root>

Examples#

Leading icon#

Form#

Form, Fieldset and Field.Error validate on submit. An invalid field turns red and says why.

API Reference#

Input

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`leading`	`ReactNode` An icon or text at the start of the field.	—

Also takes every prop of Base UI's input, plus className and style.

Form

Dialog Menu