Skip to main content

Checkbox

This is the <Checkbox /> component

Examples​


<Checkbox />

<Checkbox label="Checkbox Label Here" />

<Checkbox label="Checkbox Label Here" error errorText="The error text will show here if the error prop is true or present" />

<Checkbox
  label="Checkbox Label Here"
  color="$gray500"
/>

Basic Usage​

import Checkbox from '@candy/kitkat/checkbox'

export const MyComponent = () => {
  return <Checkbox value="value" />
}

Props​

  • color: string
    • A theme token can be passed here
    • This will control the color of the check and label text
    • The error text remains the default error color
  • error: boolean
    • If this prop is set to true or is present in the component call, the error text will appear (if the errorText prop is present)
  • errorText: string
    • If the error prop is present or true, this will appear as error text below the label
  • label: string | ReactNode
    • The label for the checkbox can be plain text or a ReactNode
  • ...input props
    • Default props for <input type="checkbox" /> can also be passed as props and will propagate to the input field in the component
    • ie checked={true}