Checkbox Showcase
Primary
Example
Toggle Example
Toggle Example
Toggle orange
Component Documentation
Component Name
Checkbox
Builder Function Name
create_checkbox_manager
Description
creates a checkbox, toggle, or dark theme switch with optional label, error states, and custom on/off values
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | checkbox | the display variant: 'checkbox', 'toggle', or 'dark_theme' |
| val | any | the current value of the checkbox, which can match on_val or off_val | |
| on_val | any | true | the value considered 'checked' |
| off_val | any | false | the value considered 'unchecked' |
| label | string | label text displayed beside the checkbox | |
| name | string | checkbox | the input name attribute |
| color | string | var(--primary-t) | the base color for the checked state or toggle |
| is_required | boolean | false | marks the input as required |
| is_read_only | boolean | false | makes the checkbox read-only if true |
| is_disabled | boolean | false | disables the checkbox if true |
| is_loading | boolean | false | displays a loading spinner if true |
| size | number | 2.4 | base size in rem for the checkbox or toggle |
| ml | number | 0 | margin-left in rem |
| mr | number | 0 | margin-right in rem |
| mt | number | 0 | margin-top in rem |
| mb | number | 0 | margin-bottom in rem |
| error_message | string | an error message displayed next to the checkbox | |
| on_change | function | callback fired when the checkbox toggles, receiving new value | |
| on_hover_change | function | callback fired on pointerenter/leave, receiving true or false |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| set_val | sets the checkbox value to on_val or off_val; updates internal bool state | val_input: any | void |
| set_val_from_bool | sets checkbox to on/off based on a boolean, optionally triggering on_change | val_bool_input: boolean is_trigger_on_change: boolean | void |
| handle_on_hover_change | internal event that calls on_hover_change(true/false) | input: boolean | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique id generated for the checkbox input |
| type | string | the display variant (checkbox, toggle, or dark_theme) |
| val_initial | any | the initial value set from config |
| val | any | the current on/off value (on_val or off_val) |
| val_bool | boolean | true if current value matches on_val, false otherwise |
| off_val | any | the value for unchecked state |
| on_val | any | the value for checked state |
| name | string | the input name attribute |
| label | string | label text displayed beside the checkbox |
| color | string | the base color for the checked state or toggle |
| is_required | boolean | true if the field is required |
| is_read_only | boolean | true if the checkbox is read-only |
| is_disabled | boolean | true if the checkbox is disabled |
| is_loading | boolean | true if a loading spinner is shown |
| error_message | string | any error text displayed beside the label |
| size | number | base size in rem of the checkbox or toggle |
| ml | number | margin-left in rem |
| mr | number | margin-right in rem |
| mt | number | margin-top in rem |
| mb | number | margin-bottom in rem |
| check_icon_manager | object | icon manager used for the check mark |
| moon_icon_manager | object | icon manager used for the moon icon in dark_theme mode |
| sun_icon_manager | object | icon manager used for the sun icon in dark_theme mode |
