Component | Checkbox

info

Introduced in v0.22.0 of the SDK.

Render a checkbox.

Node.js

ui.checkbox("checkbox-key", { 
    label: "I agree that Compose is the best thing since sliced bread",
    onChange: (value) => console.log(value)
})

Python

ui.checkbox(
    "checkbox-key",
    label="I agree that Compose is the best thing since sliced bread",
    on_change=lambda value: print(value)
)

Learn more about working with inputs.

API reference

Function signature

Node.js

ui.checkbox(
    id: string,
    properties?: Partial<{
        label: string,
        description: string,
        initialValue: boolean, // Default: false
        validate: (value: boolean) => string | void,
        onChange: (value: boolean) => void,
        style: Style | null
    }>
)

Python

ui.checkbox(
    id,
    *,
    label=None,
    description=None,
    initial_value=False,
    validate=None,
    on_change=None,
    style=None
)

Parameters

Node.js

id

required string

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

Python

id

required str

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

---

Node.js

properties.label

optional string

The label to display beside the checkbox. If not provided, the label will be inferred from the id.

Python

label

optional str

The label to display beside the checkbox. If not provided, the label will be inferred from the id.

---

Node.js

properties.description

optional string

A description to display below the checkbox.

Python

description

optional str

A description to display below the checkbox.

---

Node.js

properties.initialValue

optional boolean

The initial value of the checkbox. Defaults to false (unchecked).

Python

initial_value

optional bool

The initial value of the checkbox. Defaults to False (unchecked).

---

Node.js

properties.validate

optional (value: boolean) => string | void

Validate the checkbox value before submitting it. If the function returns a string, it will be displayed as an error message.

Python

validate

optional Callable[[bool], str | None]

Validate the checkbox value before submitting it. If the function returns a string, it will be displayed as an error message.

---

Node.js

properties.onChange

optional (value: boolean) => void

A callback function that is called when the user changes the value of the checkbox.

Python

on_change

optional Callable[[bool], None]

A callback function that is called when the user changes the value of the checkbox.

---

Node.js

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---