caliper uidocs
DemoSign inGet Pro

Inputs

Free

Set notification preferences, then a password, its strength, a quantity, and a stepper.

Kind PrimitiveComponents 12

Native form behavior

Uncontrolled values use browser defaults. Submit reads FormData locally; reset restores the original values.

A readable name, up to 64 characters. Spaces alone are not valid.

Uses the native picker with grouped and disabled options.

Text delivery is disabled in this example and is omitted from FormData.

Digest frequency

Native switch state submits only when checked.

14 days

One native thumb. Arrow keys adjust by a day; Home and End reach the limits.

Controlled state and mixed selection

React owns these values and their reset. The preset and channel checkboxes stay in sync; mixed is a visual state, not a submitted value.

Notification channels

1 of 2 channels enabled

Delivery timing
50%
Unavailable controls

A disabled fieldset preserves native semantics. These example values cannot be edited or submitted.

Password and quantity

Show a password to check it. Strength fills as the rules are met. Drag the seat label, or hold a stepper.

No password yet

  • At least 12 characters, not met
  • Uppercase and lowercase letters, not met
  • A number, not met
  • A symbol, not met

seats

Guests

Locked by plan

No password yet. 2 seats. 1 guest.

Implementation notes

Label, Select, Checkbox, Radio, Switch and Slider accept native element attributes, className and refs. Callers own IDs, fieldset groups, hints, validation and controlled reset. Select retains the browser picker; Switch is a checkbox with switch semantics; Slider is a single native range. No extra form or animation dependency is required.

Tab reaches controls; Space changes checkboxes and switches; arrows move native radio selection and range values. Native required/min/max enforce browser validity. Error text and aria-invalid identify a problem; the consumer implements policies such as rejecting spaces-only names.

<Label htmlFor="region">Region</Label>
<Select id="region" name="region" defaultValue="eu">
  <option value="eu">Frankfurt</option>
</Select>
<fieldset>
  <legend>Delivery</legend>
  <Label><Checkbox name="email" defaultChecked />Email</Label>
  <Label><Radio name="frequency" value="daily" defaultChecked />Daily</Label>
</fieldset>
<Label htmlFor="alerts">Release alerts</Label>
<Switch id="alerts" name="alerts" defaultChecked />
<Label htmlFor="retention">Activity retention</Label>
<Slider id="retention" name="retention" min={7} max={30} defaultValue={14} />
Page appearance

Components #

Each component has its own page with a focused preview, installation, usage and API.