Skip to content

Latest commit

 

History

History
332 lines (294 loc) · 28.4 KB

checkbox.md

File metadata and controls

332 lines (294 loc) · 28.4 KB
Raw
layout title description group toc requires_js previous previousLink next nextLink
home
Tailwind CSS Checkbox - Flowbite
Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors
forms
true
true
Textarea
forms/textarea/
Radio
forms/radio/

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 coded with the utility classes from Tailwind CSS and with support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the checkbox component.

Checkbox example

Use this default example of a checkbox element in a checked and unchecked state.

{{< example id="default-checkbox-example" github="forms/checkbox.md" show_dark=true >}}

Default checkbox
Checked state
{{< /example >}}

Disabled state

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

{{< example id="disabled-checkbox-example" github="forms/checkbox.md" show_dark=true >}}

Disabled checkbox
Disabled checked
{{< /example >}}

Checkbox link

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

{{< example id="checkbox-link-example" github="forms/checkbox.md" show_dark=true >}}

I agree with the terms and conditions.
{{< /example >}}

Helper text

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

{{< example id="checkbox-helper-example" github="forms/checkbox.md" show_dark=true >}}

Free shipping via Flowbite

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

{{< /example >}}

Bordered

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

{{< example id="checkbox-bordered-example" class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}

Default radio
Checked state
{{< /example >}}

Checkbox list group

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

{{< example id="checkbox-list-example" github="components/radio.md" show_dark=true >}}

Technology

  • Vue JS
  • React
  • Angular
  • Laravel
{{< /example >}}

Horizontal list group

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

{{< example id="checkbox-horizontal-list-example" github="components/radio.md" show_dark=true >}}

Identification

  • Vue JS
  • React
  • Angular
  • Laravel
{{< /example >}}
{{< requires_js >}}

Checkbox dropdown

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

{{< example id="checkbox-dropdown-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="430" >}} Dropdown search

Search
  • Bonnie Green
  • Jese Leos
  • Michael Gough
  • Robert Wall
  • Joseph Mcfall
  • Leslie Livingston
  • Roberta Casas
Delete user
{{< /example >}}

Inline layout

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

{{< example id="checkbox-inline-example" github="forms/checkbox.md" show_dark=true >}}

Inline 1
Inline 2
Inline checked
Inline disabled
{{< /example >}}

Colors

Use the text-{color}-{shade} classes from Tailwind CSS to change the color of the checkbox component.

{{< example id="checkbox-colors-example" class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}

Red
Green
Purple
Teal
Yellow
Orange
{{< /example >}}

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.

{{< example id="checkbox-advanced-example" class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}

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.
{{< /example >}}