WWAfM Design SystemVersion 0.1.5
View Dashboard

Basics

Forms

Fields and selection controls for collecting input and changing settings.

Inputs

Single-line fields for short text and structured values.

Textareas

Multi-line fields for descriptions and longer responses.

Selects

Choose one option from a list.

Checkboxes

Select independent options or multiple items.

Switches

Turn a setting on or off.

Radio groups

Choose one option from a visible set.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Input
<div className="grid gap-2">
            <Label htmlFor="project-name">Project name</Label>
            <Input id="project-name" defaultValue="WAfM Teamprofil" />
          </div>
value / onChange
Use together for controlled fields, or defaultValue for an uncontrolled initial value.
disabled / required
Native HTML field semantics. Placeholder text does not replace a label.
aria-invalid / aria-describedby
Mark invalid fields and associate explanatory or error text.
Textarea
<div className="grid gap-2">
            <Label htmlFor="description">Description</Label>
            <Textarea id="description" placeholder="Add a short description for this analysis." />
          </div>
value / onChange
Use together for controlled fields, or defaultValue for an uncontrolled initial value.
disabled / required
Native HTML field semantics. Placeholder text does not replace a label.
aria-invalid / aria-describedby
Mark invalid fields and associate explanatory or error text.
Select
<div className="grid gap-2">
            <Label htmlFor="analysis-level">Analysis level</Label>
            <Select defaultValue="level-3" items={{ "level-1": "Level 1 · Orientation", "level-2": "Level 2 · Collaboration", "level-3": "Level 3 · Personality", "level-4": "Level 4 · Development" }}>
              <SelectTrigger id="analysis-level" className="w-full">
                <SelectValue placeholder="Choose a level" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Levels</SelectLabel>
                  <SelectItem value="level-1">Level 1 · Orientation</SelectItem>
                  <SelectItem value="level-2">Level 2 · Collaboration</SelectItem>
                  <SelectItem value="level-3">Level 3 · Personality</SelectItem>
                  <SelectItem value="level-4">Level 4 · Development</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
value / onValueChange
Controlled single selection; each item needs a unique value.
defaultValue
Initial selection for an uncontrolled field.
SelectTrigger
Provide an accessible label. Arrow keys navigate options; Escape closes Select.
Checkbox
<div className="flex items-center gap-3">
              <Checkbox id="average" defaultChecked />
              <Label htmlFor="average">Show average</Label>
            </div>
checked / onCheckedChange
Controlled selection. Checkbox also supports an indeterminate state.
defaultChecked
Initial selection when the component manages its own state.
disabled
Disables pointer and keyboard interaction.
Switch
<div className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2">
              <Label htmlFor="wish-profile">Wish profile</Label>
              <Switch id="wish-profile" defaultChecked />
            </div>
checked / onCheckedChange
Controlled selection.
defaultChecked
Initial selection when the component manages its own state.
disabled
Disables pointer and keyboard interaction.
RadioGroup
<RadioGroup defaultValue="single" className="grid gap-3 sm:grid-cols-2">
            <div className="flex items-center gap-3">
              <RadioGroupItem value="single" id="single" />
              <Label htmlFor="single">Single profile</Label>
            </div>
            <div className="flex items-center gap-3">
              <RadioGroupItem value="compare" id="compare" />
              <Label htmlFor="compare">Compare profiles</Label>
            </div>
          </RadioGroup>
value / onValueChange
Controlled single selection; each item needs a unique value.
defaultValue
Initial selection for an uncontrolled field.
RadioGroup
Provide an accessible label. Arrow keys navigate options.