Live component development with hot reload

@fieldflow360/org-ui

Active tab
controls

Controls

Checkbox + Toggle

<Checkbox
  checked={emailAlerts}
  onChange={(e) => setEmailAlerts(e.target.checked)}
  label="Email alerts"
/>

<Toggle
  checked={mapLabels}
  onChange={setMapLabels}
  label="Show map labels"
/>

Checkbox

Receive generation status updates by email.

This one is disabled for demo.

Toggle

Default variant, neutral styling.

Accent variant for primary interactive controls.

Sizes

Control sizes

<Checkbox size={ComponentSizeEnum.SM} />
<Checkbox />
<Checkbox size={ComponentSizeEnum.LG} />

<Toggle size={ComponentSizeEnum.SM} checked onChange={() => {}} />
<Radio size={ComponentSizeEnum.LG} checked onChange={() => {}} />

Checkbox

Toggle

Radio

Variants

Toggle variants

<Toggle variant="default" checked onChange={() => {}} />
<Toggle variant="accent" checked onChange={() => {}} />
<Toggle variant="success" checked onChange={() => {}} />
<Toggle variant="danger" checked onChange={() => {}} />

Radio

Radio group

<Radio
  name="mode"
  checked={mode === 'auto'}
  onChange={() => setMode('auto')}
  label="Auto mode"
/>

Automatically run generation pipeline.

Configure each step yourself.