Checkbox

Toggle between two states

Allow your users to make binary (yes/no, true/false) choices through the use of the Checkbox component. Use them in forms, task lists, settings and preferences, filters, or consent agreements. If you need the same functionality with a visually distinct element, use the Switch component instead.

---
import { Checkbox } from 'webcoreui/astro'
---

<Checkbox
    label="Accept terms and conditions"
    className="checkbox"
/>

<script>
    let toggled = false

    document.querySelector('.checkbox input').addEventListener('change', e => {
        toggled = e.target.checked
    })
</script>

<script>
    import { Checkbox } from 'webcoreui/svelte'

    let checked = false
</script>

<Checkbox
    label="Accept terms and conditions"
    onClick={e => checked = e.target.checked}
/>

import React, { useState } from 'react'
import { Checkbox } from 'webcoreui/react'

const Component = () => {
    const [checked, setCheckbox] = useState(false)

    return (
        <Checkbox
            label="Accept terms and conditions"
            onClick={e => setCheckbox(e.target.checked)}
        />
    )
}

export default Component

Checkbox States

Checkboxes can have different states. Use the checked and disabled props to make a checkbox checked by default, or make it non interactive:

<Checkbox label="Checked" checked={true} />
<Checkbox label="Disabled" disabled={true} />
<Checkbox label="Checked & Disabled" checked={true} disabled={true} />

Labels and Styles

Checkboxes can be created without labels and up to two additional labels using the label and subText props. The subText prop also supports HTML tags:

<Checkbox />
<Checkbox label="Checkbox with label"  />
<Checkbox
    label="Checkbox with label"
    subText="And subtext with <strong>HTML</strong>."
/>

Their appearance and color can also be styled on an individual level, using the color prop:

<Checkbox checked={true} />
<Checkbox checked={true} color="#1dd1a1" />
<Checkbox checked={true} color="#ee5253" />
<Checkbox checked={true} color="#48dbfb" />

However, if you need to use a custom color for your checkboxes globally, the preferred way to set colors is to override the following CSS variable:

html body {
    --w-checkbox-color: #FFF;
}

API

type CheckboxProps = {
    checked?: boolean
    label?: string
    subText?: string
    disabled?: boolean
    color?: string
}

type SvelteCheckboxProps = {
    onClick?: MouseEventHandler<HTMLInputElement>
} & CheckboxProps

type ReactCheckboxProps = {
    onClick?: React.MouseEventHandler<HTMLInputElement>
} & CheckboxProps