Search documentation v0.6.1

Checkbox

Toggle between two states

Source ↗️ Report Issue ↗️

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.

Preview
How to use Checkboxes in Astro
---
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>
How to use Checkboxes in Svelte
<script>
import { Checkbox } from 'webcoreui/svelte'
let checked = false
</script>
<Checkbox
label="Accept terms and conditions"
onClick={e => checked = e.target.checked}
/>
How to use Checkboxes in React
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
PropPurpose
checked Sets the checkbox checked by default. Defaults to false.
label Set a label for the checkbox.
subText Specify additional text below the checkbox. The string can include HTML tags.
disabled Sets the checkbox to disabled. Defaults to false.
color Sets the color of the checkbox.
className Pass additional CSS classes for the checkbox.
Svelte & React PropPurpose
onClick Attach on-click event listeners.

Request improvement for this page