Forms overview

Field wrapper + Select, Checkbox, Radio. Form-grade controls that lean on native browser UX where it helps.

@plyxui/forms is the form layer. Field wraps any control with a label, helper, and error; Checkbox / Radio / Select cover the boring 80%. For controls that don't have a great native equivalent (Modal-style dropdown, multi-select with search), reach for @plyxui/comps.

Install

npm install @plyxui/forms

Field

The wrapper. Owns the label, helper text, and error state. Children receive the field's invalid state via React context, so an Input inside a Field automatically gets a red border when there's an error.

import { Field } from "@plyxui/forms";
import { Input } from "@plyxui/primitives";

<Field label="Email" helper="We never share it." error={errors.email} required>
  <Input value={email} onChange={(v) => setEmail(v)} />
</Field>

Checkbox

import { Checkbox } from "@plyxui/forms";

<Checkbox
  checked={agreed}
  onChange={setAgreed}
  label="I agree to the terms"
/>

Radio + RadioGroup

import { Radio, RadioGroup } from "@plyxui/forms";

<RadioGroup value={mode} onChange={setMode}>
  <Radio value="light" label="Light" />
  <Radio value="dark" label="Dark" />
  <Radio value="system" label="System" />
</RadioGroup>

Select

Native <select> with theme-aware chrome. Use this when keyboard a11y + mobile UX matter more than custom styling. For a fancier popover-style picker, use @plyxui/comps Dropdown.

import { Select } from "@plyxui/forms";

<Select
  value={role}
  onChange={setRole}
  options={[
    { label: "Admin", value: "admin" },
    { label: "Editor", value: "editor" },
    { label: "Viewer", value: "viewer" },
  ]}
/>