Component registry

Form controls

OpenVibe's own checkbox, radio, switch, field and button on every site: drawn by the system, in the site's colours, with motion that follows the person.

All components · Kit documents · Definition as JSON

Live web demo

Web source: openvibe-shared/ov-forms · <input type="checkbox" role="switch"> (ov-forms.css draws every box, radio, switch, field and button; data-ov-native keeps the browser's)

Anatomy

  • boxa checkbox: a rounded box whose check pops in
  • ringa radio: a ring whose dot grows
  • switchrole="switch": a track that glows when on
  • fielda text field that glows with focus
  • buttona button that answers a press

Props

checked
boolean
indeterminate
boolean
disabled
boolean
role
"switch"?

Behavior and accessibility

States
off · on · mixed · hover · pressed · focused · disabled
Tokens
color.accent · color.bg.raised · size.tap
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Form controls. Every control keeps a visible focus glow in the accent; a switch announces itself as a switch. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use Material 3 Checkbox, RadioButton and Switch with the theme's primary colour; animate the state change.

Material 3 container: Checkbox / RadioButton / Switch

iOS · SwiftUI

Use Toggle with .switch or .checkbox style and the accent tint; keep the default state animation.

Example definition

{
  "schema": "design.component@1",
  "name": "form-controls",
  "props": {
    "checked": true
  }
}

Other components