Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 3

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Checkbox

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11523-164008&t=iosNC2AkSTGs5lMh-1

Overview

  • The Checkbox component allows users to toggle a binary choice.
  • It can display a label with support for multiple languages.
  • The component supports default values, read-only mode, and disabled states.
  • Data binding and validation options ensure correct handling in forms.
  • Events enable dynamic interaction and lifecycle control.

...

  • validation – Configures validation rules for the checkbox:
  • required – When set to true, form submission is blocked unless the checkbox is checked.
  • requiredTrue – Specifically requires the checkbox to be checked (true) for validation to pass, commonly used for terms acceptance.

Notice upon missing required field

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Use for a binary, user-controlled choice; set a clear label and localize it with label / labelTranslations.
  • Initialize a predictable starting state with either value (current) or defaultValue (initial before input/reset)—don’t set both to conflicting values.
  • Use readonly to show an uneditable decision; reserve disabled for when the control is unavailable and non-interactive.

Sizing & Layout

  • Add spacing with paddingClass to keep the control readable and aligned with neighbors.

Data-Driven / Conditional Behavior

  • Enforce mandatory confirmations with validation.requiredTrue (or validation.required for general must-check scenarios).
  • Persist the user’s choice across refreshes or long flows with saveInLocalStorage; after first load, honor the stored state over defaultValue.
  • Bind the value to a meaningful dataField and specify how it is sent with controlsRequestType (BODY, PATH, HEADER).

Dos & Don’ts

DoDon’tArticle setting(s)
Use validation.requiredTrue for explicit consent requirements.Rely on helper text alone to imply consent.validation.requiredTrue
Bind the value to a stable field name and choose the right transport.Leave the field unbound or send it via an unexpected channel.dataField, controlsRequestType
Initialize and reconcile defaults at mount, then keep them stable.Change defaults mid-session, causing unexpected flips.defaultValue, ON_INIT
Trigger downstream logic directly on user toggle.Poll the value instead of responding to events.ON_VALUE_CHANGE

Accessibility

  • Provide the accessible name through label / labelTranslations. Keep labels short and unambiguous.
  • Use validation.requiredTrue for explicit acknowledgment where necessary.
  • Prefer readonly (not disabled) when the state must be visible but not changeable.