Input Option

Overview:

The Input Option component is a flexible wrapper used to pair a selectable control with a label in a consistent, accessible layout. It supports multiple input types—checkbox, radio button, and switch—and standardizes alignment, spacing, and interaction patterns across form controls.

Input Option can be used standalone for simple selections or as part of an Input Group when managing multiple related options.

---

Usage Guidelines:

Use Input Option when you need a single selectable control + label presented as a unified interaction target.

When to use

• Individual checkbox, radio, or switch items with labels

• Settings rows, preference lists, or form options

• Standalone inputs outside of grouped form sections

When to use Input Group instead

• Multiple related options that require shared labeling or validation

• Radio button groups

• Checkbox lists with shared helper or error text

Best practices

• Ensure the label clearly describes the action or state

• Use consistent selector positioning within the same context

• Delegate semantic meaning (error, status, size) to the nested input component

---

Component Properties:

type (enum)

Options: checkbox, radio, switch Purpose: Determines which input control is rendered. Usage: Select the input type based on selection behavior requirements. Context:

• checkbox → independent binary choice

• radio → mutually exclusive group choice

• switch → immediate on/off state

---

selector-position (enum)

Options: left, right Purpose: Controls placement of the input control relative to the label. Usage:

• left → standard form alignment

• right → settings rows or list-style layouts Context: Should remain consistent within a page or section.

---

Appearance Modes:

Supports the following appearance layers through nested components:

theme

• Inherited from the nested Checkbox, Radio Button, or Switch

• Automatically adapts for light and dark themes

• Ensures consistent contrast and readability

---

size

• Controlled by the nested input component (sm, base, lg)

• Affects selector dimensions, spacing, and label alignment

• Input Option layout adjusts automatically to size changes

---

style

• Applied at the nested input level

• Semantic meaning is defined by the input type:

  • grey → default, neutral

  • cta → emphasized or primary selection

  • alert → error state only (checkbox & radio)

---

status

• Interaction states (default, hover, focus, active) are handled by the nested input

• Label and selector behave as a single interactive target

ℹ️ Input Option itself does not define visual styles; it composes and aligns nested input states.

---

Nested Components:

• Checkbox: Used for independent binary selections.

• Radio Button: Used for mutually exclusive selections within a group.

• Switch: Used for immediate on/off states.

• Label: Descriptive text associated with the input control. Clicking the label toggles the input.

---

♿ Accessibility Considerations:

• Contrast: Meets WCAG AA when nested components follow design system tokens.

• Keyboard navigation:

  • Focusable via Tab

  • Toggled via Space / Arrow keys (depending on input type)

• Screen reader support:

  • Label is programmatically associated with the input

  • Selection state is announced correctly via native input semantics

• Semantic structure:

  • Uses semantic form controls (input[type=checkbox|radio], switch equivalents)

  • Label association is required for accessibility compliance

---

🧠 Developer Notes:

• Input Option is a layout and composition component, not a semantic input itself

• All validation, error (alert), size, and theme logic lives in the nested input

• Label click should forward interaction to the nested input

• When used in groups, prefer wrapping with Input Group for shared state and messaging

---

Known Issues:

No known issues.

---

Reference Links:

• Form Selection Controls (Checkbox, Radio, Switch)

• WCAG 2.1 – Form Inputs & Labels

• Dev Launchers Design Tokens (Spacing, Typography, Color)