Checkbox

Checkbox for boolean values

Usage

Toggle

Label

<Toggle initial={false}>
  {({ on, toggle }) => (
    <Checkbox
      shape="circle"
      value={on}
      onValueChange={toggle}
      label="Label"
    />
  )}
</Toggle>

<Toggle initial={false}>
  {({ on, toggle }) => (
    <Checkbox
      shape="circle"
      value={on}
      onValueChange={toggle}
      label="Label"
    />
  )}
</Toggle>

Sizes

Small

Medium

Large

<Checkbox value={true} label="Small" size="small" />
<Checkbox value={true} label="Medium" size="medium" />
<Checkbox value={true} label="Large" size="large" />

<Checkbox value={true} label="Small" size="small" />
<Checkbox value={true} label="Medium" size="medium" />
<Checkbox value={true} label="Large" size="large" />

Shapes

Square

Rounded

Pill

Circle

<Checkbox value={true} label="Square" shape="square" />
<Checkbox value={true} label="Rounded" shape="rounded" />
<Checkbox value={true} label="Pill" shape="pill" />
<Checkbox value={true} label="Circle" shape="circle" />

<Checkbox value={true} label="Square" shape="square" />
<Checkbox value={true} label="Rounded" shape="rounded" />
<Checkbox value={true} label="Pill" shape="pill" />
<Checkbox value={true} label="Circle" shape="circle" />

Partial<{ touchable: overridewithstyle<checkboxbaseprops, touchableprops, styleprop<viewstyle>>; label: overridebase<checkboxbaseprops, labelprops>; check: overridewithstyle<checkboxbaseprops, checkprops, styleprop<...>>; }> | undefined

size

Number | "small" | "medium" | "large" | undefined

"medium"

value

Boolean

false

required

label

Optionalstring

labelPosition

"top" | "left" | "right" | undefined

"right"

isDisabled

Boolean | undefined

false

shape

"rounded"

onValueChange

((value: boolean) => void) | undefined

testID

String | undefined

Overrides

export interface CheckboxOverrides {
  Touchable: TouchableProps;
  Label: LabelProps;
  Check: CheckProps;
}