diff --git a/packages/components/src/components/checkbox/Usage.mdx b/packages/components/src/components/checkbox/Usage.mdx index 168fa5bbce..98fc132c94 100644 --- a/packages/components/src/components/checkbox/Usage.mdx +++ b/packages/components/src/components/checkbox/Usage.mdx @@ -31,33 +31,37 @@ There are two different checkbox sizes: 20px and 24px. The distinction between t ## Anatomy Checkbox Anatomy -**Checkbox input (1)**\ +**Checkbox Input (1)**\ The checkbox input represents a specific state and is initially set as unselected by default. -**Checkbox label (2)**\ +**Checkbox Label (2)**\ Describes the information that you can choose to either select or deselect. -## Mouse interaction +## Mouse Interaction To select an item, users have two options: they can either directly click on the checkbox input or click on the checkbox label. By making both areas interactive, it enhances the accessibility of the click target. -Checkbox Mouse Interaction +Checkbox Mouse Interaction -## Grouping checkboxes +## Grouping Checkboxes Deciding to place a checkbox group inline or block depends on the specific context and requirements of your user interface. ### Inline -Checkbox Group Inline +Checkbox Group Inline - Use to save space when you have limited screen real estate or need to place other elements alongside the checkboxes. - Use when the options in your checkbox group have short labels, an inline layout can provide a more compact and visually streamlined presentation. - Use to visually group related options or indicate that they belong to the same category. ### Block -Checkbox Group Block +Checkbox Group Block - Use for long checkbox labels. - Use to visually separate checkbox options. -## Overflow text +## Overflow Text If your labels get too long, they may wrap to a second line. Generally try to avoid of having too long labels. A maximum of three words should be rule. -Checkbox Overflow Text +Checkbox Overflow Text ## States Checkbox States + +*** +Check out the Figma component: **[Checkbox](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=2583-7343&mode=design&t=VGECa2WmCtxIWNLe-4)** +*** \ No newline at end of file