About
A Checkbox allows users to select multiple items from a list of individual items, or to mark one individual item as selected. Checkboxes can be built with the <input> HTML element, but this can be difficult to style. Checkbox helps achieve accessible checkboxes that can be styled as needed.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox [react-aria-components] to your project and fits it to your theme.
Code
How Checkbox [react-aria-components] is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Checkbox } from "@/components/ui/checkbox"
export function CheckboxDemo() {
return <Checkbox>Unsubscribe</Checkbox>
}
![Checkbox [react-aria-components] preview](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=1080,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/checkbox/913/preview.png)
![Tag Group [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/tag-group/891/preview.png)
![Date Range Picker [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
![Grid List [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/grid-list/default/preview.png)
![Switch [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/switch/1023/preview.png)
![Select [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/select/864/preview.png)
![Range Calendar [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/range-calendar/default/preview.png)

![Slider [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/slider/827/preview.png)







