Checkbox

Requires:

@ray-js/ray≥0.5.10

Description

Checkbox for toggling a single option in a list.

Props

Property	Type	Required	Default	Description
`value`	string	No	-	When selected, triggers the parent checkbox-group change event with this value
`checked`	boolean	No	false	Whether it is currently selected; can be used as the default selection
`disabled`	boolean	No	false	Whether disabled
`color`	string	No	#007AFF	Checkbox color, same as CSS color

Examples

Basic usage

import React from 'react';
import { Checkbox, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Checkbox checked />
    </View>
  );
}

Different states

import React from 'react';
import { Checkbox, View, Text } from '@ray-js/ray';

export default function () {
  const [checked, setChecked] = React.useState(false);

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '10px' }}>
        <Text>Default state:</Text>
        <Checkbox />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>Checked state:</Text>
        <Checkbox checked />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>Disabled state:</Text>
        <Checkbox disabled />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>Custom color:</Text>
        <Checkbox color="#ff0000" checked />
      </View>
    </View>
  );
}