DWG · 01.08 · COMPONENT SPEC

Select

Single-value picker in a dropdown. The trigger reads like an input; the popup lists options with a drafting tick marking the current selection.

Default

01.08·A
PREVIEWPX · 1:1
Drawing scale
<Select
  label="Drawing scale"
  placeholder="SELECT SCALE…"
  items={scales}
/>

With default value + hint

01.08·B
PREVIEWPX · 1:1
Drawing scale

Applied to the active sheet

<Select
  label="Drawing scale"
  items={scales}
  defaultValue="1-2"
  hint="Applied to the active sheet"
/>

Error state

01.08·C

error is controlled by the consumer. Here it clears as soon as a value is chosen, and the danger message gives way to the hint.

PREVIEWPX · 1:1
Drawing scale
Scale is required
const [value, setValue] = useState<string | null>(null);

<Select
  label="Drawing scale"
  items={scales}
  value={value}
  onValueChange={setValue}
  hint="Applied to the active sheet"
  error={value ? undefined : "Scale is required"}
/>

Disabled

01.08·D
PREVIEWPX · 1:1
Drawing scale
<Select label="Drawing scale" items={scales} disabled />