panels/controls
The form controls every panel is built from: a labeled row with a switch, a labeled field, a native select, and a native range slider, each drawn with the kit's tokens. Native elements where the kit has a composite: a select or a range the browser owns works with every screen reader, opens the platform's own picker on a phone, and takes its value through the keyboard without a script.
Interfaces
SelectOption
Defined in: panels/controls.tsx:85
One option of a NativeSelect.
Properties
value
value: string;Defined in: panels/controls.tsx:86
label
label: string;Defined in: panels/controls.tsx:87
disabled?
disabled?: boolean;Defined in: panels/controls.tsx:88
Functions
Clip()
function Clip(__namedParameters): Element;Defined in: panels/controls.tsx:29
A label cut with an ellipsis where its row leaves it no room; the row's
hover text carries it whole. A skin that would rather wrap it (the
sidebar's, read on touch screens that have no hover) addresses clip.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | { className?: string; children: ReactNode; } |
__namedParameters.className? | string |
__namedParameters.children | ReactNode |
Returns
Element
SwitchRow()
function SwitchRow(__namedParameters): Element;Defined in: panels/controls.tsx:45
A label with a switch at the row's end; the id names the switch button itself, as a native control's would.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | SwitchRowProps |
Returns
Element
ActionButton()
function ActionButton(__namedParameters): Element;Defined in: panels/controls.tsx:58
A panel's action button, at the layout's field metrics (--control-h, --control-font) like the fields beside it,
its label wrapping rather than clipping. Outlined unless asked otherwise.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | any |
Returns
Element
Field()
function Field(__namedParameters): Element;Defined in: panels/controls.tsx:75
A label above its control.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | FieldProps |
Returns
Element
NativeSelect()
function NativeSelect(__namedParameters): Element;Defined in: panels/controls.tsx:100
The browser's own select, drawn as the kit's outline button.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | NativeSelectProps |
Returns
Element
RangeSlider()
function RangeSlider(__namedParameters): Element;Defined in: panels/controls.tsx:130
The browser's own range input, filled to its value in the accent color.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | RangeSliderProps |
Returns
Element