Checkbox

2026.1

Requires Celeste 2026.1

Checkbox

Signup for our newsletter

Radio Buttons

HTML

CSS

Properties

Prop	Description
`name`	Input name
`id`	Unique ID, if not set, name will be used as the ID. Required if the type is set to `radio`
`label`	Input label
`checked`	Default checked state, `true` or `false`
`type`	Input type, `checkbox` or `radio`

Note

Attributes passed to this component will be rendered on the <input> and not on the root element. This lets you listen for input events as usual.

How to use it

<div class="flow flow-space-sm" x-data>
    <h2>Checkbox</h2>
    <Checkbox name="example" label="Signup for our newsletter" x-on:change="console.log($event.target.checked)" />

    <h2 class="pt-md">Radio Buttons</h2>
    <div class="flex flex-wrap items-center gap-xs">
        <Checkbox type="radio" id="example-2-html" name="example-2" label="HTML" />
        <Checkbox type="radio" id="example-2-css" name="example-2" label="CSS" />
    </div>
</div>