Forms · ColorField, RangeSlider, StatusSelect, TilePicker
Form pieces added for search filters and admin settings: RangeSlider (two thumbs), StatusSelect (a status pill that opens a list), TilePicker (pick one or many visual options) and ColorField (hex input with contrast check).
RangeSlider: label, min, max, step, value / defaultValue ([low, high]) + onChange, unit, inputs (false shows values instead of fields), openEnd (adds "+" at max), format. StatusSelect: options ({value, label, status}), value / onChange, size ("sm"), label. TilePicker: options ({value, label, meta, image | icon | art, tint, color, disabled}), value / onChange, multiple, min (tile width), label. ColorField: label, value / onChange, against (colour to check contrast with; false hides it), hint.
–
60 m²140 m²
4.7:1 AA
Room style
Props
ColorField
Prop
Type
Notes
label?
ReactNode
value?
string
defaultValue?
string
onChange?
(v: string) => void
against?
string | false
hint?
ReactNode
className?
string
Extra class on the root element.
style?
CSSProperties
Inline style on the root element.
RangeSlider
Prop
Type
Notes
label?
ReactNode
min?
number
max?
number
step?
number
value?
[number, number]
defaultValue?
[number, number]
onChange?
(v: [number, number]) => void
unit?
string
inputs?
boolean
openEnd?
boolean
format?
(v: number) => string
hint?
ReactNode
className?
string
Extra class on the root element.
style?
CSSProperties
Inline style on the root element.
StatusSelect
Prop
Type
Notes
options
{ value: string; label: string; status?: Status }[]