> ## Documentation Index > Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Checkbox Blade component export const EditOnGitHub = ({version, path}) => { const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`; return

; }; export const Footer = () => { const sponsorsByTier = JSON.parse(`{ "agency_partner": [ { "name": "Kirschbaum", "url": "https://kirschbaumdevelopment.com/solutions/filament-development", "filename": "kirschbaum.svg" } ], "gold": [ { "name": "Agiledrop", "url": "https://www.agiledrop.com/laravel?utm_source=filament", "filename": "agiledrop.svg" }, { "name": "Baiz.ai", "url": "https://baiz.ai", "filename": "baiz-ai.svg" }, { "name": "CMS Max", "url": "https://cmsmax.com?ref=filamentphp.com", "filename": "cms-max.svg" }, { "name": "Mailtrap", "url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament", "filename": "mailtrap.svg" }, { "name": "SerpApi", "url": "https://serpapi.com/?utm_source=filamentphp", "filename": "serpapi.svg" } ] }`); function shuffleArray(items) { const result = [...items]; for (let index = result.length - 1; index > 0; index--) { const randomIndex = Math.floor(Math.random() * (index + 1)); [result[index], result[randomIndex]] = [result[randomIndex], result[index]]; } return result; } const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors)); return

Sponsored by

{sponsors.map(sponsor =>

)} Your logo here

; }; You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament. Looking for the current stable version? Visit the [5.x documentation](/docs/5.x). ## Overview You can use the checkbox component to render a checkbox input that can be used to toggle a boolean value: ```blade theme={"theme":"gruvbox-dark-hard"}

Is Admin

``` ## Triggering the error state of the checkbox The checkbox has special styling that you can use if it is invalid. To trigger this styling, you can use either Blade or Alpine.js. To trigger the error state using Blade, you can pass the `valid` attribute to the component, which contains either true or false based on if the checkbox is valid or not: ```blade theme={"theme":"gruvbox-dark-hard"} ``` Alternatively, you can use an Alpine.js expression to trigger the error state, based on if it evaluates to `true` or `false`: ```blade theme={"theme":"gruvbox-dark-hard"}

```