SushiCheckBox¶

A customizable checkbox component for the Sushi design system.

SushiCheckBox provides a standard checkbox implementation with support for:

Different sizes (Mini, Default)
Primary and secondary text labels
Custom positioning (checkbox at start or end)
Vertical alignment control
Custom content through the infoContent parameter
Consistent styling with the design system

Example¶

The SushiCheckBox component is used to create checkboxes with different configurations.

var checked by remember { mutableStateOf(false) }

SushiCheckBox(
    props = SushiCheckBoxProps(
        checked = checked,
        text = SushiTextProps(text = "I accept the terms and conditions"),
        subText = SushiTextProps(
            text = "By checking this box, you agree to our Terms of Service",
            type = SushiTextType.Regular300,
            color = SushiTheme.colors.text.secondary
        ),
        color = SushiTheme.colors.green.v600
    ),
    onCheckedChange = { checked = it },
    modifier = Modifier.fillMaxWidth()
)

Component API¶

SushiCheckBox¶

Parameter	Description
`id`	Optional identifier for the checkbox
`checked`	Whether the checkbox is checked (true) or unchecked (false)
`text`	Primary text properties to display alongside the checkbox
`subText`	Secondary text properties to display below the primary text
`enabled`	Whether the checkbox is interactive (true) or disabled (false)
`color`	The color for the checkbox when checked
`size`	The size variant of the checkbox (Mini or Default)
`boxPadding`	The padding around the checkbox component
`verticalAlignment`	The vertical alignment of the checkbox relative to its text
`direction`	The position of the checkbox relative to its text (Start or End)