GitHub
wwwwwwwwwwwwwwwwwww

Checkbox

Toggle state in forms.

yarnnpmbunpnpm
import { Check as CheckIcon } from '@tamagui/lucide-icons'

import type { CheckboxProps } from 'tamagui'

import { Checkbox, Label, XStack, YStack } from 'tamagui'



export function CheckboxDemo() {

  return (

    <YStack width={300} alignItems="center" gap="$2">

      <CheckboxWithLabel size="$3" />

      <CheckboxWithLabel size="$4" defaultChecked />

      <CheckboxWithLabel size="$5" disabled label="Accept terms (disabled)" />

    </YStack>

  )

}



export function CheckboxWithLabel({

  size,

  label = 'Accept terms and conditions',

  ...checkboxProps

}: CheckboxProps & { label?: string }) {

  const id = `checkbox-${(size || '').toString().slice(1)}`

  return (

    <XStack width={300} alignItems="center" gap="$4">

      <Checkbox id={id} size={size} {...checkboxProps}>

        <Checkbox.Indicator>

          <CheckIcon />

        </Checkbox.Indicator>

      </Checkbox>



      <Label size={size} htmlFor={id}>

        {label}

      </Label>

    </XStack>

  )

}

Features

  • Supports indeterminate state.

  • Accessible, easy to compose and customize.

  • Sizable & works controlled or uncontrolled.

  • Ability to opt-out to native checkbox on web.

Installation

Checkbox is already installed in tamagui, or you can install it independently:

yarn add @tamagui/checkbox

Usage

import { Check } from '@tamagui/lucide-icons'

import { Checkbox } from 'tamagui'



export default () => (

  <Checkbox size="$4">

    <Checkbox.Indicator>

      <Check />

    </Checkbox.Indicator>

  </Checkbox>

)

API Reference

Checkbox

Checkbox extend ThemeableStack inheriting all the props, plus:

Props

  • labeledBy

    string

    Set aria-labeled-by.

  • name

    string

    Equivalent to input name.

  • value

    string

    Give it a value (for use in HTML forms).

  • checked

    boolean

    Control the input.

  • defaultChecked

    boolean

    Uncontrolled default value.

  • required

    boolean

    Sets aria-required.

  • native

    boolean

    Renders native checkbox input on web.

  • onCheckedChange

    (checked: boolean | "indeterminate") => void

    Callback that fires when the checkbox state is changed.

  • sizeAdjust

    number

    Adjust the checkbox size scaling by this number.

  • scaleIcon

    number

    Scale the indicator icon more than usual by this number.

  • scaleSize

    number

    Default: 

    0.5

    The Tamagui size tokens should map to the height of a button at any given step. This means you want somewhat smaller checkboxes typically.

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Checkbox.Indicator

    Checkbox.Indicator extend ThemeableStack inheriting all the props, plus:

    Props

  • forceMount

    boolean

    Used to force mounting when more control is needed.

  • disablePassStyles

    boolean

    Used to disable passing styles down to children.

    • Previous

    Button

    Next

    Form

    Edit this page on GitHub.