Observatory design system

Forms

Field wraps a label, a control and one line of hint or error; Input, Textarea, Select, Checkbox and Segmented are the controls.

Examples

Fields

Repositoryowner/name as it appears on GitHub

Schedule (cron)Day of week must be 0 to 7.

Notes

keploy/keployvercel/next.js

<Field label="Repository" htmlFor="repo" hint="owner/name as it appears on GitHub">
  <Input id="repo" mono defaultValue="mishra-shardendu/observatory" />
</Field>
<Field label="Schedule (cron)" htmlFor="cron" error="Day of week must be 0 to 7.">
  <Input id="cron" mono defaultValue="0 3 * * 8" />
</Field>
<Field label="Notes" htmlFor="notes"><Textarea id="notes" placeholder="Anything the next run should know" /></Field>
<Checkbox label="keploy/keploy" defaultChecked />

Segmented control

const [range, setRange] = useState("7d");
<Segmented aria-label="Range" options={[{ value: "24h", label: "24h" }, { value: "7d", label: "7d" }, { value: "30d", label: "30d" }]} value={range} onChange={setRange} />

Guidelines

Controls sit on bg-200 with a hairline border; focus turns the border amber with a soft halo; an error turns it danger.
Repository names, cron expressions and ids take the mono input.
A segmented control is for two to five options and is controlled: pass value and onChange.
Never put an input directly on the page ground, and never use placeholder text as the label.

Props

Prop	Type	What it does
label, htmlFor, hint, error	ReactNode / string	Field: the label focuses the control with htmlFor; error replaces the hint.
mono	boolean	Input: monospace for machine-produced values.
options, value, onChange, aria-label	SegmentedOption[], T, (value: T) => void, string	Segmented: controlled, two to five options.