Checkbox

3.0.0

Requires Celeste 3.0.0

Checkbox

Signup for our newsletter

Radio Buttons

HTML

CSS

Install or Update

wp celeste pull component Checkbox

Dependencies will automatically be installed.

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" @change="console.log($event.target.checked)" />

    <h2 class="pt-md">Radio Buttons</h2>
    <div class="flex items-center gap-xs flex-wrap">
        <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>