UI kit reference

components/Form

import { … } from 'zidane-ui'ui/src/components/Form.tsx

FormSection: rows

Chat

4 settings

Transcript density

Font size

14px

FormSection: cards

Servers

Office server

wss://zidane.example.com

A server with a long name that has to truncate somewhere sensible

packages/server/src/handlers/very-long-folder-name/another-nested-directory/session-title-generator.ts

Controls

mutedtextaccentsuccesswarndangerinfo

Notes

Could not reach the server: connection refused.

Installing…

Installed 3 skills.

Install failed.

Components#

`Checkbox`Component#

The checkbox glyph for multi-select lists; the row around it is the control.

TypeScript

function Checkbox(props: CheckboxProps): Element

Parameters

Parameters
Name	Type	Description
props	`CheckboxProps`	Component props.

Returns

Element

Props

Checkbox props
Name	Type	Description
checked	`boolean`	Whether the box is ticked.
className?	`string`	Extra classes on the root element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:300

`ErrorNote`Component#

A failure worth reading: a soft danger wash, no border.

TypeScript

function ErrorNote(props: ErrorNoteProps): Element

Parameters

Parameters
Name	Type	Description
props	`ErrorNoteProps`	Component props.

Returns

Element

Props

ErrorNote props
Name	Type	Description
children	`ReactNode`	The error message.
className?	`string`	Extra classes on the root element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:63

`FormCard`Component#

An entity card lifted off its section tray (server, provider, environment).

TypeScript

function FormCard(props: FormCardProps): Element

Parameters

Parameters
Name	Type	Description
props	`FormCardProps`	Component props.

Returns

Element

Props

FormCard props
Name	Type	Description
children	`ReactNode`	The card's content.
className?	`string`	Extra classes on the card.
data-testid?	`string`	Test id for the card element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:179

`FormSection`Component#

A labelled group. rows (default) hosts flat rows; cards spaces raised FormCards apart on the same tray.

TypeScript

function FormSection(props: FormSectionProps): Element

Parameters

Parameters
Name	Type	Description
props	`FormSectionProps`	Component props.

Returns

Element

Props

FormSection props
Name	Type	Default	Description
children	`ReactNode`		The rows or cards.
className?	`string`		Extra classes on the section.
layout?	`'rows' \| 'cards'`	`'rows'`	`rows` hosts flat rows; `cards` spaces raised `FormCard`s apart.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
title?	`ReactNode`		Label above the section. The label line is omitted when neither `title` nor `trailing` is set.
trailing?	`ReactNode`		Right side of the label line: a count, a small action.

ui/src/components/Form.tsx:142

`HostRow`Component#

A row whose one control sits among other buttons (a picker with Test and clear, a select, a switch beside a note): it washes on hover like a row button, and a click anywhere on it but on a button or a field works the control, the element marked data-row-control (or the button, select or input inside it; a select opens its list). Keyboard users reach the control itself.

TypeScript

function HostRow(props: HostRowProps): Element

Parameters

Parameters
Name	Type	Description
props	`HostRowProps`	The row's `div` attributes, `children` and `disabled`.

Returns

Element

Props

HostRow props
Name	Type	Default	Description
children	`ReactNode`		The row's content, the control marked `data-row-control` among it.
disabled?	`boolean`	`false`	The control can't be used now: no wash, no forwarding.

ui/src/components/Form.tsx:424

`MetaChip`Component#

A status or value chip set into its surface: track tone, meta voice.

TypeScript

function MetaChip(props: MetaChipProps): Element

Parameters

Parameters
Name	Type	Description
props	`MetaChipProps`	Component props.

Returns

Element

Props

MetaChip props
Name	Type	Default	Description
children	`ReactNode`		The chip's content.
className?	`string`		Extra classes on the chip.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
title?	`string`		Native tooltip.
tone?	`'danger' \| 'muted' \| 'text' \| 'accent' \| 'success' \| 'warn' \| 'info'`	`'muted'`	Text colour of the chip.

ui/src/components/Form.tsx:244

`NavRow`Component#

A row that navigates somewhere (another modal, a sub-surface).

TypeScript

function NavRow(props: NavRowProps): Element

Parameters

Parameters
Name	Type	Description
props	`NavRowProps`	Component props.

Returns

Element

Props

NavRow props
Name	Type	Description
action	`{ description: string; icon: string; label: string; onSelect: () => void }`	The row: its `label`, `description` and `icon` class, and `onSelect`, called when the row is clicked.
className?	`string`	Extra classes on the root element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:388

`OpLine`Component#

One-line feedback for a lifecycle op (install / update / remove).

TypeScript

function OpLine(props: OpLineProps): Element

Parameters

Parameters
Name	Type	Description
props	`OpLineProps`	Component props.

Returns

Element

Props

OpLine props
Name	Type	Description
children	`ReactNode`	The feedback text.
className?	`string`	Extra classes on the root element.
kind	`'error' \| 'busy' \| 'notice'`	Tone of the line: `busy` and `notice` are muted (a result worth a quiet line, never a celebration: a success that shows elsewhere needs no line at all), and `error` is danger-coloured and announced as an alert.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:98

`RowText`Component#

Label over an optional muted description, the left half of every row.

TypeScript

function RowText(props: RowTextProps): Element

Parameters

Parameters
Name	Type	Description
props	`RowTextProps`	Component props.

Returns

Element

Props

RowText props
Name	Type	Default	Description
className?	`string`		Extra classes on the root element.
description?	`ReactNode`		Muted text under the label.
label	`ReactNode`		The row's main text.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
truncate?	`boolean`	`true`	Cut the description to one line with an ellipsis. When off, it wraps.

ui/src/components/Form.tsx:209

`SegmentedRow`Component#

Label + description on the left, a Segmented picker on the right.

TypeScript

function SegmentedRow<T extends string>(props: SegmentedRowProps<T>): Element

Type parameters

Type parameters
Name	Type	Description
T	`extends string`

Parameters

Parameters
Name	Type	Description
props	`SegmentedRowProps<T>`	Component props.

Returns

Element

Props

SegmentedRow props
Name	Type	Description
className?	`string`	Extra classes on the root element.
description?	`string`	Muted text under the label. It wraps.
label	`string`	The row's main text. It also names the choice group.
onChange	`(v: T) => void`	Called with the new value when an option is picked.
options	`{ disabled?: boolean; icon?: string; label: string; title?: string; value: T }[]`	The choices, as `SegmentedOption`s with a string `label`.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
value	`T`	The value of the selected option.

ui/src/components/Form.tsx:515

`SliderRow`Component#

Labelled range input with a value readout and a reset.

TypeScript

function SliderRow(props: SliderRowProps): Element

Parameters

Parameters
Name	Type	Description
props	`SliderRowProps`	Component props.

Returns

Element

Props

SliderRow props
Name	Type	Description
className?	`string`	Extra classes on the root element.
description?	`string`	Muted text under the label. It wraps.
format	`(v: number) => string`	Formats the value for the readout beside the slider.
label	`string`	The row's main text. It also names the slider.
max	`number`	Highest value.
min	`number`	Lowest value.
onChange	`(v: number) => void`	Called with the new value while the slider moves.
onReset?	`() => void`	Called when the slider is double-clicked, to restore the default value.
step	`number`	Increment between values.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
value	`number`	Current value.

ui/src/components/Form.tsx:563

`Switch`Component#

The settings-row switch glyph (SwitchGlyph md); the row around it is the control.

TypeScript

function Switch(props: SwitchProps): Element

Parameters

Parameters
Name	Type	Description
props	`SwitchProps`	Component props.

Returns

Element

Props

Switch props
Name	Type	Description
className?	`string`	Extra classes on the root element.
on	`boolean`	Whether the switch is on.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:281

`SwitchRow`Component#

Plain on/off row for store-backed booleans (not the vendored settings table).

TypeScript

function SwitchRow(props: SwitchRowProps): Element

Parameters

Parameters
Name	Type	Description
props	`SwitchRowProps`	Component props.

Returns

Element

Props

SwitchRow props
Name	Type	Description
className?	`string`	Extra classes on the root element.
description?	`string`	Muted text under the label. It wraps.
label	`string`	The row's main text.
on	`boolean`	Whether the option is on.
onToggle	`() => void`	Called when the row is clicked.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:476

`ToggleSwitch`Component#

A standalone switch control, for rows that host other buttons too.

TypeScript

function ToggleSwitch(props: ToggleSwitchProps): Element

Parameters

Parameters
Name	Type	Description
props	`ToggleSwitchProps`	Component props.

Returns

Element

Props

ToggleSwitch props
Name	Type	Default	Description
className?	`string`		Extra classes on the root element.
disabled?	`boolean`	`false`	Grey the switch out and ignore clicks.
label	`string`		Accessible name of the switch. It has no visible text.
on	`boolean`		Whether the switch is on.
onChange	`(on: boolean) => void`		Called with the new state when the switch is clicked.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
title?	`string`		Native tooltip.

ui/src/components/Form.tsx:347

Constants#

`FIELD_LABEL_CLASS`Constant#

Label above a form field.

TypeScript

const FIELD_LABEL_CLASS = 'block text-xs text-[var(--zg-text-muted)] mb-1'

ui/src/components/Form.tsx:43

`FORM_CARD_CLASS`Constant#

An inline add / install form: a raised card above the list it feeds.

TypeScript

const FORM_CARD_CLASS = 'zg-raised border rounded-zg-lg p-4 space-y-3'

ui/src/components/Form.tsx:46

`INPUT_CLASS`Constant#

Single-line text input: a well set into its surface.

TypeScript

const INPUT_CLASS: 'zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled'

ui/src/components/Form.tsx:35

`ROW_BUTTON_CLASS`Constant#

A whole-row button inside a section tray: flat, washed on hover.

TypeScript

const ROW_BUTTON_CLASS = ...

ui/src/components/Form.tsx:20

`ROW_CLASS`Constant#

A static row whose control (segment, slider, input) takes the input.

TypeScript

const ROW_CLASS = 'flex items-center gap-3 px-3 py-2'

ui/src/components/Form.tsx:23

`ROW_HOST_CLASS`Constant#

A HostRow's surface: a row button's wash, giving with the control inside (zg-press-host).

TypeScript

const ROW_HOST_CLASS = ...

ui/src/components/Form.tsx:26

`ROW_TRIGGER_CLASS`Constant#

The control of a HostRow that takes the row's width: a picker's trigger, holding the label and the value.

TypeScript

const ROW_TRIGGER_CLASS = ...

ui/src/components/Form.tsx:29

`TEXTAREA_CLASS`Constant#

Multi-line / code input.

TypeScript

const TEXTAREA_CLASS: 'zg-well w-full px-2.5 py-2 text-zg-label font-mono leading-relaxed placeholder:text-[var(--zg-text-subtle)] resize-y'

ui/src/components/Form.tsx:39

Interfaces#

`CheckboxProps`Interface#

Props for Checkbox.

TypeScript

interface CheckboxProps

Properties

CheckboxProps properties
Name	Type	Description
checked	`boolean`	Whether the box is ticked.
className?	`string`	Extra classes on the root element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:286

`ErrorNoteProps`Interface#

Props for ErrorNote.

TypeScript

interface ErrorNoteProps

Properties

ErrorNoteProps properties
Name	Type	Description
children	`ReactNode`	The error message.
className?	`string`	Extra classes on the root element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:49

`FormCardProps`Interface#

Props for FormCard.

TypeScript

interface FormCardProps

Properties

FormCardProps properties
Name	Type	Description
children	`ReactNode`	The card's content.
className?	`string`	Extra classes on the card.
data-testid?	`string`	Test id for the card element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:163

`FormSectionProps`Interface#

Props for FormSection.

TypeScript

interface FormSectionProps

Properties

FormSectionProps properties
Name	Type	Default	Description
children	`ReactNode`		The rows or cards.
className?	`string`		Extra classes on the section.
layout?	`'rows' \| 'cards'`	`'rows'`	`rows` hosts flat rows; `cards` spaces raised `FormCard`s apart.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
title?	`ReactNode`		Label above the section. The label line is omitted when neither `title` nor `trailing` is set.
trailing?	`ReactNode`		Right side of the label line: a count, a small action.

ui/src/components/Form.tsx:116

`HostRowProps`Interface#

Props for HostRow: the row's div attributes, children and disabled.

TypeScript

interface HostRowProps extends HTMLAttributes<HTMLDivElement>

Properties

HostRowProps properties
Name	Type	Default	Description
children	`ReactNode`		The row's content, the control marked `data-row-control` among it.
disabled?	`boolean`	`false`	The control can't be used now: no wash, no forwarding.

ui/src/components/Form.tsx:404

`MetaChipProps`Interface#

Props for MetaChip.

TypeScript

interface MetaChipProps

Properties

MetaChipProps properties
Name	Type	Default	Description
children	`ReactNode`		The chip's content.
className?	`string`		Extra classes on the chip.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
title?	`string`		Native tooltip.
tone?	`'danger' \| 'muted' \| 'text' \| 'accent' \| 'success' \| 'warn' \| 'info'`	`'muted'`	Text colour of the chip.

ui/src/components/Form.tsx:223

`NavRowProps`Interface#

Props for NavRow.

TypeScript

interface NavRowProps

Properties

NavRowProps properties
Name	Type	Description
action	`{ description: string; icon: string; label: string; onSelect: () => void }`	The row: its `label`, `description` and `icon` class, and `onSelect`, called when the row is clicked.
className?	`string`	Extra classes on the root element.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:371

`OpLineProps`Interface#

Props for OpLine.

TypeScript

interface OpLineProps

Properties

OpLineProps properties
Name	Type	Description
children	`ReactNode`	The feedback text.
className?	`string`	Extra classes on the root element.
kind	`'error' \| 'busy' \| 'notice'`	Tone of the line: `busy` and `notice` are muted (a result worth a quiet line, never a celebration: a success that shows elsewhere needs no line at all), and `error` is danger-coloured and announced as an alert.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:78

`RowTextProps`Interface#

Props for RowText.

TypeScript

interface RowTextProps

Properties

RowTextProps properties
Name	Type	Default	Description
className?	`string`		Extra classes on the root element.
description?	`ReactNode`		Muted text under the label.
label	`ReactNode`		The row's main text.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
truncate?	`boolean`	`true`	Cut the description to one line with an ellipsis. When off, it wraps.

ui/src/components/Form.tsx:188

`SegmentedRowProps`Interface#

Props for SegmentedRow.

TypeScript

interface SegmentedRowProps<T extends string>

Type parameters

SegmentedRowProps type parameters
Name	Type	Description
T	`extends string`

Properties

SegmentedRowProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
description?	`string`	Muted text under the label. It wraps.
label	`string`	The row's main text. It also names the choice group.
onChange	`(v: T) => void`	Called with the new value when an option is picked.
options	`{ disabled?: boolean; icon?: string; label: string; title?: string; value: T }[]`	The choices, as `SegmentedOption`s with a string `label`.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
value	`T`	The value of the selected option.

ui/src/components/Form.tsx:493

`SliderRowProps`Interface#

Props for SliderRow.

TypeScript

interface SliderRowProps

Properties

SliderRowProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
description?	`string`	Muted text under the label. It wraps.
format	`(v: number) => string`	Formats the value for the readout beside the slider.
label	`string`	The row's main text. It also names the slider.
max	`number`	Highest value.
min	`number`	Lowest value.
onChange	`(v: number) => void`	Called with the new value while the slider moves.
onReset?	`() => void`	Called when the slider is double-clicked, to restore the default value.
step	`number`	Increment between values.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
value	`number`	Current value.

ui/src/components/Form.tsx:533

`SwitchProps`Interface#

Props for Switch.

TypeScript

interface SwitchProps

Properties

SwitchProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
on	`boolean`	Whether the switch is on.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:267

`SwitchRowProps`Interface#

Props for SwitchRow.

TypeScript

interface SwitchRowProps

Properties

SwitchRowProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
description?	`string`	Muted text under the label. It wraps.
label	`string`	The row's main text.
on	`boolean`	Whether the option is on.
onToggle	`() => void`	Called when the row is clicked.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Form.tsx:456

`ToggleSwitchProps`Interface#

Props for ToggleSwitch.

TypeScript

interface ToggleSwitchProps

Properties

ToggleSwitchProps properties
Name	Type	Default	Description
className?	`string`		Extra classes on the root element.
disabled?	`boolean`	`false`	Grey the switch out and ignore clicks.
label	`string`		Accessible name of the switch. It has no visible text.
on	`boolean`		Whether the switch is on.
onChange	`(on: boolean) => void`		Called with the new state when the switch is clicked.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
title?	`string`		Native tooltip.

ui/src/components/Form.tsx:322

Components#

CheckboxComponent#

Parameters

Returns

Props

ErrorNoteComponent#

Parameters

Returns

Props

FormCardComponent#

Parameters

Returns

Props

FormSectionComponent#

Parameters

Returns

Props

HostRowComponent#

Parameters

Returns

Props

MetaChipComponent#

Parameters

Returns

Props

NavRowComponent#

Parameters

Returns

Props

OpLineComponent#

Parameters

Returns

Props

RowTextComponent#

Parameters

Returns

Props

SegmentedRowComponent#

Type parameters

Parameters

Returns

Props

SliderRowComponent#

Parameters

Returns

Props

SwitchComponent#

Parameters

Returns

Props

SwitchRowComponent#

Parameters

Returns

Props

ToggleSwitchComponent#

Parameters

Returns

Props

Constants#

FIELD_LABEL_CLASSConstant#

FORM_CARD_CLASSConstant#

INPUT_CLASSConstant#

ROW_BUTTON_CLASSConstant#

ROW_CLASSConstant#

ROW_HOST_CLASSConstant#

ROW_TRIGGER_CLASSConstant#

TEXTAREA_CLASSConstant#

Interfaces#

CheckboxPropsInterface#

Properties

ErrorNotePropsInterface#

Properties

FormCardPropsInterface#

Properties

FormSectionPropsInterface#

Properties

HostRowPropsInterface#

Properties

MetaChipPropsInterface#

Properties

`Checkbox`Component#

`ErrorNote`Component#

`FormCard`Component#

`FormSection`Component#

`HostRow`Component#

`MetaChip`Component#

`NavRow`Component#

`OpLine`Component#

`RowText`Component#

`SegmentedRow`Component#

`SliderRow`Component#

`Switch`Component#

`SwitchRow`Component#

`ToggleSwitch`Component#

`FIELD_LABEL_CLASS`Constant#

`FORM_CARD_CLASS`Constant#

`INPUT_CLASS`Constant#

`ROW_BUTTON_CLASS`Constant#

`ROW_CLASS`Constant#

`ROW_HOST_CLASS`Constant#

`ROW_TRIGGER_CLASS`Constant#

`TEXTAREA_CLASS`Constant#

`CheckboxProps`Interface#

`ErrorNoteProps`Interface#

`FormCardProps`Interface#

`FormSectionProps`Interface#

`HostRowProps`Interface#

`MetaChipProps`Interface#

`NavRowProps`Interface#

`OpLineProps`Interface#

`RowTextProps`Interface#

`SegmentedRowProps`Interface#

`SliderRowProps`Interface#

`SwitchProps`Interface#

`SwitchRowProps`Interface#

`ToggleSwitchProps`Interface#