Field

Field owns the label, the hint and the error, and wires them to the control with the right ids. Inputs come in two tones: surface for pages, on-glass for controls placed inside a glass sheet or popover.

import { Field, Input } from '@andrewbehma/glass-ui';

Playground

Field.tsx

import { Field, Input } from '@andrewbehma/glass-ui';

<Field
  label="Project name"
  hint="Shown in the sidebar and in links."
  htmlFor="project-name"
>
  <Input id="project-name" placeholder="Northwind" />
</Field>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Default
Required
Error
Disabled