Primitives

Form inputs

Form primitives: Field (label + hint/error wrapper), Input (single-line), Textarea (multi-line), Select (native dropdown), and SearchInput (search with compass icon). Compose Field around any input element to add accessible labels and validation text.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Layout wrapper + four input primitives. Compose Field with any input child.

import { Field, Input, Textarea, Select, SearchInput } from 'achery-ui'

<Field label="Name" hint="e.g. Iron-Gall" error="Required">
  <Input value={…} onChange={…} error={!!error} />
</Field>

<Field label="Notes">
  <Textarea rows={4} error={false} />
</Field>

<Field label="Status">
  <Select value={…} onChange={…}>
    <option value="a">A</option>
  </Select>
</Field>

<SearchInput placeholder="Search…" value={…} onChange={…} />

A Field's label names the control inside it and its hint/error describes it — automatic for Input, Textarea, Select and TagInput. A control given its own id keeps it, and the label points at that id. A custom control spreads useFieldControl():

const MyControl = () => <input {...useFieldControl()} />
<Field label="Colour" hint="Hex"><MyControl /></Field>