ttolbel UI

Component

Checkbox

A full-width row with a label on the left and a round checkmark control on the right, animated on toggle.

The primitive

checkbox.tsx
<NativeCheckbox label="I agree to the terms" checked={checked} onValueChange={setChecked} />

Example

A stack of agreement checkboxes a user has to clear before a payment can be confirmed.

checkbox-example.tsx
<NativeCheckbox label="I agree to the terms" checked={a} onValueChange={setA} />
<NativeCheckbox label="Send me a receipt by email" checked={b} onValueChange={setB} />

Capabilities

PropTypeDescription
labelrequiredstring
checkedrequiredboolean
onValueChangerequired(checked: boolean) => void
disabledboolean
classNamestring