Fidely UI v1 beta is now available!. 🚀

Checkbox

A control element that allows for multiple selections within a set.

Terms and Conditions

import { Checkbox } from '@fidely-ui/react/checkbox'

export const CheckboxBasics = () => {
  return (
    <Checkbox.Root>
      <Checkbox.HiddenInput />
      <Checkbox.Control>
        <Checkbox.Indicator />
      </Checkbox.Control>
      <Checkbox.Label>Terms and Conditions</Checkbox.Label>
    </Checkbox.Root>
  )
}

Usage

import { Checkbox } from '@fidely-ui/react'

<Checkbox.Root>
  <Checkbox.HiddenInput />
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label />
</Checkbox.Root>

Examples

With custom icon

Use your own custom checked icon by wrapping the Checkbox.Indicator

Fidely UI Checkbox

import { Checkbox } from '@fidely-ui/react/checkbox'
import { GiCheckMark } from 'react-icons/gi'

export const CheckboxWithIcon = () => {
  return (
    <Checkbox.Root defaultChecked>
      <Checkbox.HiddenInput />
      <Checkbox.Control>
        <Checkbox.Indicator>
          <GiCheckMark />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Fidely UI Checkbox</Checkbox.Label>
    </Checkbox.Root>
  )
}

Sizes

Pass the size prop to the Switch.Root component to change the size of the switch component.

Terms and ConditionsTerms and ConditionsTerms and ConditionsTerms and Conditions

import { Checkbox, VStack } from '@fidely-ui/react'

export const CheckboxSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg'] as const

  return (
    <VStack gap={3}>
      {sizes.map((size) => (
        <Checkbox.Root size={size} key={size}>
          <Checkbox.HiddenInput />
          <Checkbox.Control>
            <Checkbox.Indicator />
          </Checkbox.Control>
          <Checkbox.Label>Terms and Conditions</Checkbox.Label>
        </Checkbox.Root>
      ))}
    </VStack>
  )
}

Colors

Pass the colorPalette prop to the Switch.Root component to change the color of the component.

greenorangepurpleblue

import { Checkbox, HStack, Stack } from '@fidely-ui/react'

export const CheckboxWithColors = () => {
  return (
    <Stack gap={2}>
      <HStack gap={3} alignItems="center">
        <Checkbox.Root colorPalette={'green'} defaultChecked>
          <Checkbox.HiddenInput />
          <Checkbox.Control>
            <Checkbox.Indicator />
          </Checkbox.Control>
          <Checkbox.Label fontWeight="medium" textTransform="capitalize">
            green
          </Checkbox.Label>
        </Checkbox.Root>

        <Checkbox.Root colorPalette={'orange'} defaultChecked>
          <Checkbox.HiddenInput />
          <Checkbox.Control>
            <Checkbox.Indicator />
          </Checkbox.Control>
          <Checkbox.Label fontWeight="medium" textTransform="capitalize">
            orange
          </Checkbox.Label>
        </Checkbox.Root>

        <Checkbox.Root colorPalette={'purple'} defaultChecked>
          <Checkbox.HiddenInput />
          <Checkbox.Control>
            <Checkbox.Indicator />
          </Checkbox.Control>
          <Checkbox.Label fontWeight="medium" textTransform="capitalize">
            purple
          </Checkbox.Label>
        </Checkbox.Root>

        <Checkbox.Root colorPalette={'blue'} defaultChecked>
          <Checkbox.HiddenInput />
          <Checkbox.Control>
            <Checkbox.Indicator />
          </Checkbox.Control>
          <Checkbox.Label fontWeight="medium" textTransform="capitalize">
            blue
          </Checkbox.Label>
        </Checkbox.Root>
      </HStack>
    </Stack>
  )
}

Controlled

Use the checked and onCheckedChange props to control the state of the switch.

Fidely UI Checkbox

'use client'

import { useState } from 'react'
import { Checkbox } from '@fidely-ui/react'

export const CheckboxWithControl = () => {
  const [checked, setChecked] = useState(false)

  return (
    <Checkbox.Root
      checked={checked}
      onCheckedChange={(e) => setChecked(!!e.checked)}
    >
      <Checkbox.HiddenInput />
      <Checkbox.Control>
        <Checkbox.Indicator />
      </Checkbox.Control>
      <Checkbox.Label>Fidely UI Checkbox</Checkbox.Label>
    </Checkbox.Root>
  )
}

Disabled States

Pass the disabled prop to the Checkbox.Root component to disabled the checkbox.

Disabled

import { Checkbox, VStack } from '@fidely-ui/react'

export const CheckboxWithState = () => {
  return (
    <VStack gap={3}>
      <Checkbox.Root disabled defaultChecked>
        <Checkbox.HiddenInput />
        <Checkbox.Control>
          <Checkbox.Indicator />
        </Checkbox.Control>
        <Checkbox.Label fontWeight="medium" textTransform="capitalize">
          Disabled
        </Checkbox.Label>
      </Checkbox.Root>
    </VStack>
  )
}

Props

Root

Prop	Type	Default	Description
`checked`	`boolean`	—	Controls the checked state of the switch (for controlled usage).
`defaultChecked`	`boolean`	`false`	Sets the initial checked state (for uncontrolled usage).
`onCheckedChange`	`(checked: boolean) => void`	—	Callback fired when the switch state changes.
`required`	`boolean`	`false`	Marks the switch as required in a form.
`disabled`	`boolean`	`false`	Disables interaction with the switch.
`name`	`string`	—	The name of the switch input for form submission.
`value`	`string`	`"on"`	The value of the switch input when checked.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the size of the switch.
`colorPalette`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	`"blue"`	Sets the color palette of the switch.
`children`	`ReactNode`	—	The content of the switch, typically including control, thumb, and label.
`as`	`React.ElementType`	—	The content of the switch, typically including control, thumb, and label.

Control

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contains the visual parts of the switch (usually the `Thumb`).

Indicator

Prop	Type	Default	Description
`children`	`ReactNode`	—	Optional custom checkbox icon.

Label

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label text displayed beside the switch.

HiddenInput

Prop	Type	Default	Description
`name`	`string`	—	The name of the hidden input field.
`value`	`string`	`"on"`	The value of the hidden input when the switch is checked.

On this page

Usage
Examples
Props