Skip to main content

Checkbox

Checkbox component for toggling boolean value related to some context
(code example)

info

This component extends TouchableOpacity props.

tip

This component support margin, background modifiers.

Usage​

Live Editor
function Example(props) {
  const [value, setValue] = useState(false);
  return (
    <div>
      <Checkbox value={value} onValueChange={setValue}/>
    </div>
  );
}
Result
Loading...

API​

borderRadius​

The Checkbox border radius number

color​

The Checkbox color string

containerStyle​

Custom styling for the checkbox and label container ViewStyle

disabled​

Whether the checkbox should be disabled boolean

iconColor​

The selected icon color string

label​

Add a label to the Checkbox string

labelProps​

Props to pass on to the label component TextProps

labelStyle​

Pass to style the label TextStyle

onChangeValidity​

Callback for when field validity has changed (isValid: boolean) => void

onValueChange​

Callback function for value change event (value) => void

outline​

Alternative Checkbox outline style boolean

required​

Whether the checkbox is required boolean

selectedIcon​

The icon asset to use for the selected indication ImageRequireSource

size​

The Checkbox size, affect both width and height number

style​

Custom styling for the Checkbox ViewStyle

value​

The Checkbox value. If true the switch will be turned on. Default value is false boolean