<!-- AUTO-GENERATED FILE. Do not edit manually. -->

# Token Reference Table

This table lists all tokens for this component:

| Token | Description |
|-------|------------|
| gap | Controls the horizontal spacing between the checkbox box (the square input element) and the label text. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkbox-gap |
| caption.color | Controls the color of the checkbox label text.<br>CSS variable: --wm-checkbox-caption-color |
| caption.font-size | Controls the size of the checkbox label text (the descriptive text that appears next to the checkbox). This text explains what the checkbox option represents, such as 'I agree to terms' or 'Subscribe to newsletter'.<br>CSS variable: --wm-checkbox-caption-font-size |
| caption.font-family | Sets the font family (typeface) for the checkbox label text. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-caption-font-family |
| caption.font-weight | Controls the thickness/boldness of the checkbox label text. Acceptable values: normal, bold, 100-900. This affects how prominent the descriptive text appears next to the checkbox.<br>CSS variable: --wm-checkbox-caption-font-weight |
| caption.line-height | Controls the vertical spacing between lines of text in the checkbox label. This is important when the label text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-checkbox-caption-line-height |
| caption.letter-spacing | Controls the horizontal spacing between individual characters in the checkbox label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-checkbox-caption-letter-spacing |
| size | Controls the width and height of the checkbox box (the square input element that users click to check/uncheck). This determines how large the actual checkbox appears visually. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-size |
| icon.size | Controls the size of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it's checked. This icon is typically smaller than the checkbox box itself to fit nicely inside. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-icon-size |
| icon.color | Sets the color of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it's checked. This is typically a contrasting color to ensure the checkmark is clearly visible against the checkbox background.<br>CSS variable: --wm-checkbox-icon-color |
| background | Sets the background color of the checkbox box (the square input element). When transparent, only the border is visible. When filled with a color, the checkbox appears solid. This affects the visual appearance of the unchecked state.<br>CSS variable: --wm-checkbox-background |
| border.width | Controls the thickness of the border around the checkbox box (the square input element). This creates the outline that defines the checkbox shape and makes it visible to users.<br>CSS variable: --wm-checkbox-border-width |
| border.color | Sets the color of the border around the checkbox box (the square input element). This determines the color of the outline that defines the checkbox shape in its default/unchecked state.<br>CSS variable: --wm-checkbox-border-color |
| border.radius | Controls the corner rounding of the checkbox box (the square input element). Small values create slightly rounded corners, while larger values make the checkbox more rounded or even circular.<br>CSS variable: --wm-checkbox-border-radius |
| state.layer.size | Controls the size of the invisible clickable area around the checkbox (the state layer). This area is larger than the visible checkbox box, making it easier for users to click and interact with the checkbox. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-state-layer-size |
| state.layer.color | Sets the color of the state layer that appears when users hover, focus, or interact with the checkbox. This creates visual feedback to show that the checkbox is interactive and responsive to user actions.<br>CSS variable: --wm-checkbox-state-layer-color |
| state.layer.opacity | Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-checkbox-state-layer-opacity |