Checkbox

The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants.

Checkbox examples

Use this default example of a checbkox element in a checked, unchecked and indeterminate state.

Default checkbox Checked state Indeterminate state

Disabled state

This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.

Disabled checkbox Disabled checked Disabled indeterminate

Alternative syntax

If you need separate control over the label and the checkbox you can use the verbose syntax, but then you need to take care about aligning manually.

NOT WORKING Label on the other side

Checkbox with a link

Use this example if you want to add an anchor link inside the label of the checkbox component.

I agree with the terms and conditions .

Helper text

Get started with this example if you want to add a secondary helper text for the checkbox component.

Free shipping via Flowbite

For orders shipped from $25 in books or $29 in other categories

Bordered

Use this example of a checkbox inside a card element to enable a larger area of clicking activation.

Default radio

Checked state

Checkbox list group

Use this example to show a list of checkbox items grouped inside a card.

Technology

svelte
Vue JS
React
Angular

Horizontal list group

Use this example to show a list of checkbox items inside a card horizontally.

Identification

Svelte
Vue JS
React
Angular

Checkbox dropdown

Use this example to show a list of checkbox items inside a dropdown menu.

Inline layout

You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.

Inline 1 Inline 2 Inline checked Inline disabled

You can use the property `inline` as the alternative.

Inline 1 Inline 2 Inline checked Inline disabled

Colors

CheckboxButton

The special case component - `CheckboxButton` - is the `Checkbox` with the [Button](/docs/components/buttons) look and feel. I can be used as standalone element or be wrapped inside [ButtonGroup](/docs/components/button-group). This component accepts all props from the [Button](/docs/components/buttons) for styling and `Checkbox` for behaviour.

Advanced layout

Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.

Choose technology:

React Js

A JavaScript library for building user interfaces.

Vue Js

Vue.js is an model–view front end JavaScript framework.

Angular

A TypeScript-based web application framework.

Group variable

One Two Three

Group: 2,3