Skip to Content

Getting started

Overview

Frameworks

Forms

Checkbox Card

Used to select or deselect options displayed within cards.

Source Storybook Recipe Ark

'use client'

import { CheckboxCard } from '@saas-ui/react'

export const CheckboxCardBasic = () => {
  return (
    <CheckboxCard label="Next.js" description="Best for apps" maxW="240px" />
  )
}

Anatomy

import { CheckboxCard } from '@saas-ui/react/checkbox-card'

<CheckboxCard label="Checkbox Card" />

Examples

Group

Use the CheckboxCardGroup component to group multiple checkbox cards.

Select framework(s)

'use client'

import { CheckboxGroup, Flex, Text } from '@chakra-ui/react'
import { CheckboxCard } from '@saas-ui/react'

export const CheckboxCardWithGroup = () => {
  return (
    <CheckboxGroup defaultValue={['next']}>
      <Text textStyle="sm" fontWeight="medium">
        Select framework(s)
      </Text>
      <Flex gap="2">
        {items.map((item) => (
          <CheckboxCard
            label={item.title}
            description={item.description}
            key={item.value}
            value={item.value}
          />
        ))}
      </Flex>
    </CheckboxGroup>
  )
}

const items = [
  { value: 'next', title: 'Next.js', description: 'Best for apps' },
  { value: 'vite', title: 'Vite', description: 'Best for SPAs' },
  { value: 'astro', title: 'Astro', description: 'Best for static sites' },
]

Sizes

Use the size prop to change the size of the checkbox card.

'use client'

import { For, Stack } from '@chakra-ui/react'
import { CheckboxCard } from '@saas-ui/react'

export const CheckboxCardWithSizes = () => {
  return (
    <Stack maxW="320px">
      <For each={['sm', 'md', 'lg']}>
        {(size) => <CheckboxCard label={`Checkbox (${size})`} size={size} />}
      </For>
    </Stack>
  )
}

Variants

Use the variant prop to change the variant of the checkbox card.

'use client'

import { For, Stack } from '@chakra-ui/react'
import { CheckboxCard } from '@saas-ui/react'

export const CheckboxCardWithVariants = () => {
  return (
    <Stack maxW="320px">
      <For each={['subtle', 'surface', 'outline']}>
        {(variant) => (
          <CheckboxCard
            defaultChecked
            label={`Checkbox (${variant})`}
            colorPalette="teal"
            variant={variant}
          />
        )}
      </For>
    </Stack>
  )
}

Disabled

Use the disabled prop to make the checkbox card disabled.

'use client'

import { CheckboxCard } from '@saas-ui/react'

export const CheckboxCardDisabled = () => {
  return (
    <CheckboxCard
      disabled
      label="Disabled"
      description="This is a disabled checkbox"
      maxW="320px"
    />
  )
}

Addon

Use the CheckboxCardAddon to add some more context to the checkbox card.

Some supporting textNew

'use client'

import { Badge, HStack } from '@chakra-ui/react'
import { CheckboxCard } from '@saas-ui/react'

export const CheckboxCardWithAddon = () => {
  return (
    <CheckboxCard
      label="With Addon"
      description="Some description"
      maxW="300px"
      addon={
        <HStack>
          Some supporting text
          <Badge variant="solid">New</Badge>
        </HStack>
      }
    />
  )
}

Icon

Render custom icons within the checkbox card.

'use client'

import { CheckboxGroup, Float, Icon, SimpleGrid } from '@chakra-ui/react'
import { CheckboxCard } from '@saas-ui/react'
import { HiGlobeAlt, HiLockClosed, HiShieldCheck, HiUser } from 'react-icons/hi'

export const CheckboxCardWithIcon = () => {
  return (
    <CheckboxGroup defaultValue={['Guest']}>
      <SimpleGrid minChildWidth="200px" gap="2">
        {items.map((item) => (
          <CheckboxCard
            align="center"
            key={item.label}
            icon={
              <Icon fontSize="2xl" mb="2">
                {item.icon}
              </Icon>
            }
            label={item.label}
            description={item.description}
          />
        ))}
      </SimpleGrid>
    </CheckboxGroup>
  )
}

const items = [
  { icon: <HiShieldCheck />, label: 'Admin', description: 'Give full access' },
  { icon: <HiUser />, label: 'User', description: 'Give limited access' },
  {
    icon: <HiGlobeAlt />,
    label: 'Guest',
    description: 'Give read-only access',
  },
  { icon: <HiLockClosed />, label: 'Blocked', description: 'No access' },
]

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'presence' \| 'status' \| 'sidebar' \| 'sidebar.accent' \| 'accent' \| 'slate'` The color palette of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`variant`	`'outline'`	`'surface' \| 'subtle' \| 'outline' \| 'solid'` The variant of the component
`align`	`'start'`	`'start' \| 'end' \| 'center'` The align of the component
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation of the component
`justify`		`'start' \| 'end' \| 'center'` The justify of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.

Previous

Next