Top
CheckBox API - API
CheckBox API
Props (27)
Callback Props (1)
Styling Props (9)
Methods (1)
Below you can find a list of public props that the <CheckBox /> supports. Besides this list, the component also supports all standard DOM attributes - those are not explicitly mentioned here, with a few exceptions.
Bool
default: false
If set to true, will render a simple <input type="checkbox" /> instead of the default svg icons.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  supportIndeterminate
  browserNative
>
  Native checkbox
</CheckBox>
When using browserNative, some props of the <CheckBox /> are no longer supported: notably those referring to the icons rendered for each state.
Bool|any
default: undefined
The value of this property controls whether the <Checkbox /> is rendered checked or not.
  • To be rendered checked, the value of this property needs to equal the value specified for checkedValue which is true by default.
  • To be rendered unchecked, the value of this property needs to equal the value specified for uncheckedValue which is false by default.
  • If the <Checkbox /> supports the indeterminate state, in order to be rendered indeterminate, the value of this property needs to equal the value specified for indeterminateValue which is null by default.
This property is a controlled property. So unless you specify onChange and update the value of this prop explicitly, you won't see any change on user interaction (on click or on focus + space key).
For uncontrolled alternative, use defaultChecked.
For details on controlled props, see React docs on controlled components.
When the <Checkbox /> is clicked it triggers the onChange event, so the <Checkbox /> state can be updated.
The <Checkbox /> responds to clicks anywhere inside the component. To only support clicks on the <Checkbox /> icon, use iconCheckOnly.
The <Checkbox /> also responds to the spacebar being pressed when it is focused, in the same way it responds to click events.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = { value: 'on' }
    }
    toggle(value) {
      this.setState({ value })
    }

    render() {
      return <div>
        <div>Current value is: <code>{JSON.stringify(this.state.value)}</code>.</div>
        <CheckBox
          checked={this.state.value}
          checkedValue="on" uncheckedValue="off"
          onChange={this.toggle.bind(this)}
        >
          Enable logging
        </CheckBox>
      </div>
    }
  }
  return <App />
}
This is a controlled property - so unless you have an onChange handler and re-render the component to update the prop, nothing will happen.
For uncontrolled behaviour, use defaultChecked.
For details on controlled props, see React docs on controlled components.
React.Node|Fn(domProps: Object, checkboxProps: Object)
default: undefined
You can use this prop to customize the icon used for the checked state of the <Checkbox />.
It can either be some JSX code (a valid React.Node - satisfying the PropTypes.node propType, basically anything that can be rendered: numbers, strings, elements or an array containing these types) or a function returning a React.Node.
When checkedIconSrc is specified, an <img /> is rendered instead (and checkedIcon is ignored), with the src being the value specified by checkedIconSrc.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  defaultChecked
  supportIndeterminate
  indeterminateIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center', color: 'lightgray' }}>✔</div>}
  checkedIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center' }}>✔</div>}
  uncheckedIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center'}}>✅</div>}
>
  Check to toggle
</CheckBox>
String
default: undefined
When specified, an <img /> tag is rendered instead of the default icon in the checked state, and its src will be set to the value of this property.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <div>
  <div style={{marginBottom: 20}}>
    <CheckBox
      defaultChecked
    >
      Default appearance
    </CheckBox>
  </div>
  <CheckBox
    defaultChecked
    supportIndeterminate
    indeterminateIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAVklEQVRYR+3XSwoAIAhF0ef+F13UqEkhhJ/BdQH2OmCYSRoqLOsUYIXJrC1/ChAAgbYCv+/E7WLuKSAAAggggAACCJQLRG3K7n2AAAikCUQd9Oxb/jue0ulMAScZnD8AAAAASUVORK5CYII="
    checkedIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA6UlEQVRYR+2XUQ6EMAhE8abrydabrsFIQgiBAe1qjP3xp3UeM9DoREQ/unBNdwJgmH+uzXntwAvwOvBIB777WM3OeA2fAhb/7MILEVmIoQBaXIq3EMMAPHEPAgKIMvRuzUic92sXUoAsQwtQEeezIQCSoQaoiocAaIYC0BFvA9gcu+KtCLTl3Ey8ZM69hvRmX+8rNWH1OyETTx1A8+1ULmdSBzoQSOVlAD6QNZttTiQy2AHEiUrlLQciiI443ITZfd8VPwQgPcFP70MDyf8wACoS7Ss34RmipZvwbEH7vvs5MLpi9/2X/x2vLnVoAc4mSPQAAAAASUVORK5CYII="
    uncheckedIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAQ0lEQVRYR+3XsQ0AIBACQNx/aI0Wxgn+LY4FINcxksw0Zvw0YI+pzJF/BQwgQIAAAQIECBAgQIAAgXaByl94u9rf8QIHSzwBLL+RowAAAABJRU5ErkJggg=="
  >
    With checkedIconSrc
  </CheckBox>
</div>
If defined, this is the value that will be submitted for the <Checkbox />, if the component is in checked state at submit, instead of checkedValue.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: true }
    }
    toggle(value) { this.setState({ value }) }

    handleSubmit(event) {
      zippy.notification.first.addNotification({ title: 'Checkbox',
        content: <div>
          Current value is: <code>{JSON.stringify(event.target.elements['the-answer'].value)}</code>
        </div>
      });
      event.preventDefault()
    }

    render() {
      return <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div style={{marginBottom: 20}}>
            <CheckBox
              checked={this.state.value}
              checkedValue={true}
              uncheckedValue={false}
              indeterminateValue={null}
              checkedSubmitValue="yes"
              uncheckedSubmitValue="no"
              indeterminateSubmitValue="not-sure"
              supportIndeterminate={true}
              name="the-answer"
              onChange={this.toggle.bind(this)}
            >
            Check to toggle
            </CheckBox>
          </div>
          <input type="submit" value="Submit" />
          <NotificationBoard
            offset={{top:6, right: 20}}
            style={{marginTop: 60}}
            id="first"
          />
        </form>
      </div>
    }
  }
  return <App />
}
Bool|any
default: true
When the checked prop equals the value of the checkedValue prop, the <Checkbox /> is rendered as checked.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props); this.state = { value: 'on' }
    }
    toggle(value) { this.setState({ value }) }
    render() {
      return <div>
        <div>Current value is: <code>{JSON.stringify(this.state.value)}</code>.</div>
        <CheckBox checked={this.state.value}
          checkedValue="on" uncheckedValue="off" indeterminateValue="n/a"
          supportIndeterminate={true}
          onChange={this.toggle.bind(this)}
        >
          Check to toggle
        </CheckBox>
      </div>
    }
  }
  return <App />
}
React.Node
default: undefined
The children you pass to the <Checkbox /> will be rendered as the checkbox label, right next to the checkbox icon.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <div>
  <CheckBox
    children="Label as children"
  />
</div>
String
default: "end"
Use value "start" if you want to render the label or the children before the check icon.
import React from 'react'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state={
        rtl: false,
        childrenPosition: 'end'
      };
    }

    render() {
      return <div>
        <div style={{marginBottom: 20}}>
          <CheckBox
            checked={this.state.rtl}
            onChange={(rtl) => {
              this.setState({ rtl })
            }}
          >
            Right-to-left
          </CheckBox>
        </div>
        <div style={{marginBottom: 20}}>
          <p>
            Children position:
          </p>
          <RadioButtonGroup
            radioValue={this.state.childrenPosition}
            onChange={({ checkedItemValue: childrenPosition }) => {
              this.setState({ childrenPosition })
            }}
            radioOptions={[
              { label: 'start', value: 'start' },
              { label: 'end', value: 'end' }
            ]}
          />
        </div>

        <CheckBox
          rtl={this.state.rtl}
          childrenPosition={this.state.childrenPosition}
        >
          Check the result
        </CheckBox>
      </div>
    }
  }
  return <App />
}
If rtl is true, the order will be reversed, therefore label or children will be to the right if value is set to "start", and to the left if value is set to "end".
Bool|any
default: undefined
Uncontrolled version of checked. When this is used instead of the controlled version, the <Checkbox /> will hold its checked state into its internal component state.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props)
    }

    onChange() {
      zippy.notification.first.addNotification({
        title: 'onChange',
        content: 'Checked: ' + this.checkbox.state.checked
      })
    }

    render() {
      return <div>
        <CheckBox
          defaultChecked={null}
          supportIndeterminate
          ref={(checkbox) => this.checkbox = checkbox}
          onChange={this.onChange.bind(this)}
        >
          Check to toggle
        </CheckBox>
        <NotificationBoard
          offset={{top:6, right: 20}}
          style={{marginTop: 60}}
          id="first"
        />
      </div>
    }
  }

  return <App />
}
Bool
default: false
Disabled checkboxes do not support user interaction and have styling to indicate the disabled state of the <Checkbox />.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  disabled
  onClick={() => console.error('This code should not execute!')}
  defaultChecked={true}
>
  No interaction allowed
</CheckBox>
Mouse interactions (onClick, onMouseEnter, etc) with disabled checkboxes are not possible (since they have pointer-events: none).
In addition, changing the checked value via setChecked does not work. If you want to change the checked value, re-render the <Checkbox /> with updated props.
For styling disabled checkboxes, you can use any of the following props: disabledStyle, disabledClassName, disabledIconStyle, disabledIconClassName.
Bool
default: false
When true, the <Checkbox /> will only update when clicking the checkbox icon.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  iconCheckOnly
>
  Only click check icon please!
</CheckBox>
// will also update when focused, and you hit the spacebar
The above <Checkbox /> will also update when it is focused and you hit the spacebar. If you don't want this behaviour, you can choose to make the <Checkbox /> unfocusable, by specifying tabIndex=null.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  iconCheckOnly
  tabIndex={null}
>
  Only click check icon please!
</CheckBox>
// NOT FOCUSABLE anymore.
String|Number
default: "1.2em"
Determines the size of the <Checkbox /> (SVG) icons to render.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { iconSize: 24 }
  }

  render() {
    return <div>
      <RadioButtonGroup
        radioValue={this.state.iconSize}
        radioOptions={
          [
            { label: 'small', value: 18 },
            { label: 'medium', value: 24 },
            { label: 'large', value: 32 }
          ]
        }
        onChange={(event) => this.setState({iconSize: event.checkedItemValue})}
      />
      <div style={{position: 'relative', marginTop: 20, height: 50, width: 200}}>
        <CheckBox
          style={{position: 'absolute', right: 0, top: 0, bottom: 0, margin: 'auto'}}
          defaultChecked={true}
          supportIndeterminate
          iconSize={this.state.iconSize}
        >
          Custom icon size - {this.state.iconSize}px
        </CheckBox>
      </div>
    </div>
  }
}

export default () => <App />
Since the default value is expressed in "em" units, the size is relative to the font size of the <CheckBox />, so it should relate pretty well to the checkbox label by default.
React.Node|Fn(domProps: Object, checkboxProps: Object)
default: undefined
You can use this prop to customize the icon used for the unchecked state of the <Checkbox />.
It can either be some JSX code (a valid React.Node - satisfying the PropTypes.node propType, basically anything that can be rendered: numbers, strings, elements or an array containing these types) or a function returning a React.Node.
When indeterminateIconSrc is specified, an <img /> is rendered instead (and indeterminateIcon is ignored), with the src being the value specified by indeterminateIconSrc.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  defaultChecked={null}
  supportIndeterminate
  // it can be any valid jsx
  indeterminateIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center', color: 'lightgray' }}>✔</div>}
  checkedIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center' }}>✔</div>}
  uncheckedIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center'}}>✅</div>}
>
  Check to toggle
</CheckBox>
String
default: undefined
When specified, an <img /> tag is rendered instead of the default icon (in the indeterminate state), and its src will be set to the value of this property.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <div>
  <div style={{marginBottom: 20}}>
    <CheckBox
      supportIndeterminate
      defaultChecked={null}
    >
      Default appearance
    </CheckBox>
  </div>
  <CheckBox
    defaultChecked={null}
    supportIndeterminate
    indeterminateIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAVklEQVRYR+3XSwoAIAhF0ef+F13UqEkhhJ/BdQH2OmCYSRoqLOsUYIXJrC1/ChAAgbYCv+/E7WLuKSAAAggggAACCJQLRG3K7n2AAAikCUQd9Oxb/jue0ulMAScZnD8AAAAASUVORK5CYII="
    checkedIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA6UlEQVRYR+2XUQ6EMAhE8abrydabrsFIQgiBAe1qjP3xp3UeM9DoREQ/unBNdwJgmH+uzXntwAvwOvBIB777WM3OeA2fAhb/7MILEVmIoQBaXIq3EMMAPHEPAgKIMvRuzUic92sXUoAsQwtQEeezIQCSoQaoiocAaIYC0BFvA9gcu+KtCLTl3Ey8ZM69hvRmX+8rNWH1OyETTx1A8+1ULmdSBzoQSOVlAD6QNZttTiQy2AHEiUrlLQciiI443ITZfd8VPwQgPcFP70MDyf8wACoS7Ss34RmipZvwbEH7vvs5MLpi9/2X/x2vLnVoAc4mSPQAAAAASUVORK5CYII="
    uncheckedIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAQ0lEQVRYR+3XsQ0AIBACQNx/aI0Wxgn+LY4FINcxksw0Zvw0YI+pzJF/BQwgQIAAAQIECBAgQIAAgXaByl94u9rf8QIHSzwBLL+RowAAAABJRU5ErkJggg=="
  >
    With indeterminateIconSrc
  </CheckBox>
</div>
If defined, this is the value that will be submitted for the <Checkbox />, if the component is in indeterminate state at submit, instead of indeterminateValue.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: true }
    }
    toggle(value) { this.setState({ value }) }

    handleSubmit(event) {
      zippy.notification.first.addNotification({ title: 'Checkbox',
        content: <div>
          Current value is: <code>{JSON.stringify(event.target.elements['the-answer'].value)}</code>
        </div>
      });
      event.preventDefault()
    }

    render() {
      return <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div style={{marginBottom: 20}}>
            <CheckBox
              checked={this.state.value}
              checkedValue={true}
              uncheckedValue={false}
              indeterminateValue={null}
              checkedSubmitValue="yes"
              uncheckedSubmitValue="no"
              indeterminateSubmitValue="not-sure"
              supportIndeterminate={true}
              name="the-answer"
              onChange={this.toggle.bind(this)}
            >
            Check to toggle
            </CheckBox>
          </div>
          <input type="submit" value="Submit" />
          <NotificationBoard
            offset={{top:6, right: 20}}
            style={{marginTop: 60}}
            id="first"
          />
        </form>
      </div>
    }
  }
  return <App />
}
Bool|any
default: null
When the checked prop equals the value of the indeterminateValue prop and the component supports indeterminate state, the <Checkbox /> is rendered as indeterminate.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props); this.state = { value: 'on' }
    }
    toggle(value) { this.setState({ value }) }
    render() {
      return <div>
        <div>Current value is: <code>{JSON.stringify(this.state.value)}</code>.</div>
        <CheckBox checked={this.state.value}
          checkedValue="on" uncheckedValue="off" indeterminateValue="n/a"
          supportIndeterminate={true}
          onChange={this.toggle.bind(this)}
        >
          Check to toggle
        </CheckBox>
      </div>
    }
  }
  return <App />
}
String
default: undefined
If specified, the <Checkbox /> value will be submitted under this name if inside a form.
If this value is defined, the <Checkbox /> component will render a hidden input with the specified name value, so it works well with HTML forms that are submitted.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
    }

    handleSubmit(event) {
      zippy.notification.first.addNotification({ title: 'Checkbox',
        content: 'The name of the checkbox is: ' + event.target.elements[0].name
      });
      event.preventDefault()
    }

    render() {
      return <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div style={{marginBottom: 20}}>
            <CheckBox
              name="the-name-of-the-checkbox"
            >
              Check whatever state, then submit
            </CheckBox>
          </div>
          <input type="submit" value="Submit" />
          <NotificationBoard
            offset={{top:6, right: 20}}
            style={{marginTop: 60}}
            id="first"
          />
        </form>
      </div>
    }
  }
  return <App />
}
You can specify a name prop, and yet prevent the <Checkbox /> from rendering the hidden input via the shouldSubmit prop.
Fn(oldValue, props: Object)
default: undefined
When users interact with the <CheckBox />, the succession of its states is the following:
Succession of states
--------------------

              click
    CHECKED -----------> UNCHECKED
       ^                    /
        \                  /
         \                /
   click  \              / click
           \            /
            \          /
             \        v
            INDETERMINATE
You can however change this order, via the nextValue function prop. Let's have a look at an example with different state succession where the indeterminate state is coming after the checked state:
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

const nextValue = (oldValue, props) => {
  if (oldValue === props.checkedValue) {
    return props.indeterminateValue;
  }
  if (oldValue === props.indeterminateValue) {
    return props.uncheckedValue;
  }
  if (oldValue === props.uncheckedValue) {
    return props.checkedValue;
  }
};


export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props); this.state = { value: 'CHECKED' }
    }
    toggle(value) { this.setState({ value }) }
    render() {
      return <div>
        <div>Current value is: <code>{JSON.stringify(this.state.value)}</code>.</div>
        <CheckBox checked={this.state.value}
          checkedValue="CHECKED"
          uncheckedValue="UNCHECKED"
          indeterminateValue="INDETERMINATE"
          supportIndeterminate={true}
          nextValue={nextValue}
          onChange={this.toggle.bind(this)}
        >
          Altered state succession
        </CheckBox>
      </div>
    }
  }
  return <App />
}
Bool
default: undefined
Read-only checkboxes do not change their checked state as a result of user interaction. However, mouse events such as onClick, onMouseEnter are triggered.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => <div>
  <CheckBox
    readOnly
    onClick={() => zippy.notification.first.addNotification({ content: 'onClick called!'})}
    defaultChecked={true}
  >
    Check is read only. Will not change.
  </CheckBox>
  <NotificationBoard
    offset={{top:6, right: 20}}
    style={{marginTop: 60}}
    id="first"
  />
</div>
Changing the checked value via setChecked works as expected.
Bool
default: false
Determines the value of the CSS orientation property applied to the <Checkbox />. Also affects <Checkbox /> layout, and how childrenPosition works.
import React from 'react'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state={
        rtl: false,
        childrenPosition: 'end'
      };
    }

    render() {
      return <div>
        <div style={{marginBottom: 20}}>
          <CheckBox
            checked={this.state.rtl}
            onChange={(rtl) => {
              this.setState({ rtl })
            }}
          >
            Right-to-left
          </CheckBox>
        </div>
        <div style={{marginBottom: 20}}>
          <p>
            Children position:
          </p>
          <RadioButtonGroup
            radioValue={this.state.childrenPosition}
            onChange={({ checkedItemValue: childrenPosition }) => {
              this.setState({ childrenPosition })
            }}
            radioOptions={[
              { label: 'start', value: 'start' },
              { label: 'end', value: 'end' }
            ]}
          />
        </div>

        <CheckBox
          rtl={this.state.rtl}
          childrenPosition={this.state.childrenPosition}
        >
          Check the result
        </CheckBox>
      </div>
    }
  }
  return <App />
}
Bool|Fn(checked: Bool, props: Object)
default: undefined
This prop provides a fine-grained control over rendering the hidden input for submission. If this is true or returns trutty, the <Checkbox /> is also expected to have a name that is used as the name of the hidden input.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        shouldSubmit: true
      }
    }

    handleSubmit(event) {
      zippy.notification.first.addNotification({ title: 'Checkbox',
        content: 'The name of the checkbox is: ' + event.target.elements[0].name
      });
      event.preventDefault()
    }

    render() {
      return <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div style={{marginBottom: 20}}>
            <CheckBox
              checked={this.state.shouldSubmit}
              onChange={(shouldSubmit) => this.setState({shouldSubmit})}
            >
              shouldSubmit
            </CheckBox>
          </div>
          <div style={{marginBottom: 20}}>
            <CheckBox
              name="the-name-of-the-checkbox"
              shouldSubmit={this.state.shouldSubmit}
            >
              Check whatever state, then submit
            </CheckBox>
          </div>
          <input type="submit" value="Submit" />
          <NotificationBoard
            offset={{top:6, right: 20}}
            style={{marginTop: 60}}
            id="first"
          />
        </form>
      </div>
    }
  }
  return <App />
}
Bool
default: false
Whether the <CheckBox /> should have an indeterminate state.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <div>
  <div style={{marginBottom: 20}}>
    <CheckBox
      defaultChecked={true}
    >
      Check to toggle between two states (default)
    </CheckBox>
  </div>
  <CheckBox
    defaultChecked={true}
    supportIndeterminate
  >
    Check to toggle between three states
  </CheckBox>
</div>
See indeterminateValue for more details.
Number
default: 0
By default, the <Checkbox /> is focusable in normal tab navigation order.
You can change tab navigation order by adjusting the value of tabIndex.
If you want to make the <Checkbox /> unfocusable, use tabIndex={null}
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <div>
  <div style={{ marginBottom: 20 }}>
    If checkbox would be focusable, the color of the children it would be red.
  </div>
  <CheckBox
    tabIndex={null}
    focusedStyle={{ color: 'red' }}
  >Not focusable</CheckBox>
</div>
  // focusedStyle never applied since it's not focusable
React.Node|Fn(domProps: Object, checkboxProps: Object)
default: undefined
You can use this prop to customize the icon used for the unchecked state of the <Checkbox />.
It can either be some JSX code (a valid React.Node - satisfying the PropTypes.node propType, basically anything that can be rendered: numbers, strings, elements or an array containing these types) or a function returning a React.Node.
When uncheckedIconSrc is specified, an <img /> is rendered instead (and uncheckedIcon is ignored), with the src being the value specified by uncheckedIconSrc.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  // it can be any valid jsx
  checkedIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center' }}>✔</div>}
  uncheckedIcon={<div style={{display: 'flex', justifyContent: 'center', fontSize: 20, alignItems: 'center'}}>✅</div>}
>
  Check to toggle
</CheckBox>
String
default: undefined
When specified, an <img /> tag is rendered instead of the default icon of the unchecked state, and its src will be set to the value of this property.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <div>
  <div style={{marginBottom: 20}}>
    <CheckBox>
      Default appearance
    </CheckBox>
  </div>
  <CheckBox
    indeterminateIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAVklEQVRYR+3XSwoAIAhF0ef+F13UqEkhhJ/BdQH2OmCYSRoqLOsUYIXJrC1/ChAAgbYCv+/E7WLuKSAAAggggAACCJQLRG3K7n2AAAikCUQd9Oxb/jue0ulMAScZnD8AAAAASUVORK5CYII="
    checkedIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA6UlEQVRYR+2XUQ6EMAhE8abrydabrsFIQgiBAe1qjP3xp3UeM9DoREQ/unBNdwJgmH+uzXntwAvwOvBIB777WM3OeA2fAhb/7MILEVmIoQBaXIq3EMMAPHEPAgKIMvRuzUic92sXUoAsQwtQEeezIQCSoQaoiocAaIYC0BFvA9gcu+KtCLTl3Ey8ZM69hvRmX+8rNWH1OyETTx1A8+1ULmdSBzoQSOVlAD6QNZttTiQy2AHEiUrlLQciiI443ITZfd8VPwQgPcFP70MDyf8wACoS7Ss34RmipZvwbEH7vvs5MLpi9/2X/x2vLnVoAc4mSPQAAAAASUVORK5CYII="
    uncheckedIconSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAQ0lEQVRYR+3XsQ0AIBACQNx/aI0Wxgn+LY4FINcxksw0Zvw0YI+pzJF/BQwgQIAAAQIECBAgQIAAgXaByl94u9rf8QIHSzwBLL+RowAAAABJRU5ErkJggg=="
  >
    With uncheckedIconSrc
  </CheckBox>
</div>
If defined, this is the value that will be submitted for the <Checkbox />, if the component is in unchecked state at submit, instead of uncheckedValue.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: true }
    }
    toggle(value) { this.setState({ value }) }

    handleSubmit(event) {
      zippy.notification.first.addNotification({ title: 'Checkbox',
        content: <div>
          Current value is: <code>{JSON.stringify(event.target.elements['the-answer'].value)}</code>
        </div>
      });
      event.preventDefault()
    }

    render() {
      return <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div style={{marginBottom: 20}}>
            <CheckBox
              checked={this.state.value}
              checkedValue={true}
              uncheckedValue={false}
              indeterminateValue={null}
              checkedSubmitValue="yes"
              uncheckedSubmitValue="no"
              indeterminateSubmitValue="not-sure"
              supportIndeterminate={true}
              name="the-answer"
              onChange={this.toggle.bind(this)}
            >
            Check to toggle
            </CheckBox>
          </div>
          <input type="submit" value="Submit" />
          <NotificationBoard
            offset={{top:6, right: 20}}
            style={{marginTop: 60}}
            id="first"
          />
        </form>
      </div>
    }
  }
  return <App />
}
Bool|any
default: false
When the checked prop equals the value of the uncheckedValue prop, the <Checkbox /> is rendered as unchecked.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props); this.state = { value: 'on' }
    }
    toggle(value) { this.setState({ value }) }
    render() {
      return <div>
        <div>Current value is: <code>{JSON.stringify(this.state.value)}</code>.</div>
        <CheckBox checked={this.state.value}
          checkedValue="on" uncheckedValue="off" indeterminateValue="n/a"
          supportIndeterminate={true}
          onChange={this.toggle.bind(this)}
        >
          Check to toggle
        </CheckBox>
      </div>
    }
  }
  return <App />
}
Fn(checked: Bool, event)
default: undefined
If provided, onChange will be called whenever the user interacts with the <Checkbox /> to change its state.
import React from 'react'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => <div>
  <CheckBox
    defaultChecked={true}
    onChange={(checked) => zippy.notification.first.addNotification({
      content: 'checked: ' + checked
    })}
  >
    Toggle
  </CheckBox>
  <NotificationBoard
    offset={{top:6, right: 20}}
    style={{marginTop: 60}}
    id="first"
  />
</div>
The function will be called with two parameters: a boolean, representing the new checked value of the checkbox, and the event object.
The event object can be undefined if the change is due to a direct call to the setChecked method.
String
default: undefined
A CSS className for the <CheckBox />. This does not override the default zippy-react-toolkit-checkbox className, but appends the value to the existing one.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox className="checkbox-global-yellow-bg">
  Yellow Background
</CheckBox>
String
default: undefined
A CSS className appended to existing component classes, for checkboxes with disabled="true".
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  disabled
  disabledClassName="checkbox-green-color-when-disabled"
>
  Disabled checkbox
</CheckBox>
Object
default: undefined
A style object applied to <CheckBox /> components that have disabled="true". Applied after the style is applied, so any clashing keys are overwritten.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  disabled
  disabledStyle={{ color: 'green' }}
  style={{ color: 'magenta' }}
>
  Gray text - disabled
</CheckBox>
String
default: undefined
A CSS className appended to existing component classes, for focused checkboxes.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox focusedClassName="checkbox-red-color-when-focused">
  Red text when focused
</CheckBox>
Object
default: undefined
A style object applied to focused checkboxes. Applied after the style is applied, so any clashing keys are overwritten.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  focusedStyle={{ color: 'red' }}
  style={{fontWeight: 'bold', color: 'blue'}}
>
  Red text when focused
</CheckBox>
Bool
default: true
When true, the <CheckBox /> will have display: inline-flex. Otherwise it will have display: flex.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

const squareStyle = { border: '1px solid lightgray', width: 100, height: 100, margin: '10px 5px' }

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { inlineBlock: false }
    }
    render() {
      return <div>
        <div style={{marginBottom: 20}}>
          <CheckBox
            checked={this.state.inlineBlock}
            onChange={inlineBlock => this.setState({inlineBlock})}
          >
            inlineBlock
          </CheckBox>
        </div>
        <div style={{border: '1px dashed lightgray', width: 360, height: 360, padding: 5 }}>
          <CheckBox
            style={squareStyle}
            inlineBlock={this.state.inlineBlock}
          >
            Check one
          </CheckBox>
          <CheckBox
            style={squareStyle}
            inlineBlock={this.state.inlineBlock}
          >
            Check two
          </CheckBox>
          <CheckBox
            style={squareStyle}
            inlineBlock={this.state.inlineBlock}
          >
            Check three
          </CheckBox>
      </div>
    </div>
    }
  }
  return <App />
}
String
default: undefined
A CSS className appended to existing component classes, for<CheckBox /> components with readOnly="true".
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox readOnly readOnlyClassName="checkbox-blue-color-when-read-only">
  Blue text when readOnly
</CheckBox>
Object
default: undefined
A style object applied to <CheckBox /> components that have readOnly="true". Applied after the style is applied, so any clashing keys are overwritten.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  readOnly
  readOnlyStyle={{ background: 'Lime' }}
  style={{fontWeight: 'bold', background: 'red'}}
>
  Lime background
</CheckBox>
Object
default: undefined
A style object for the <CheckBox /> component. Always applied.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

export default () => <CheckBox
  style={{ fontWeight: 'bold' }}
>
  Bold text
</CheckBox>
Fn(checked: Bool|any)
undefined
Sets the checked value of the <Checkbox /> to the specified value.
If the checked argument is does not equal one of the values in checkedValue, uncheckedValue or indeterminateValue (if the <Checkbox /> supports indeterminate), the method will have no effect.
If the component is controlled, the onChange prop will be called with the new value.
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.refCheckBox = (c) => this.checkbox = c
    }

    setUnchecked() {
      this.checkbox.setChecked(false)
    }
    setChecked() {
      this.checkbox.setChecked(true)
    }
    setUndeterminate() {
      this.checkbox.setChecked(null)
    }

    render() {
      return <div>
        <Button onClick={this.setUnchecked.bind(this)} style={{ marginBottom: 20, marginRight: 10 }}>Set unchecked</Button>
        <Button onClick={this.setChecked.bind(this)} style={{ marginBottom: 20, marginRight: 10 }}>Set checked</Button>
        <Button onClick={this.setUndeterminate.bind(this)} style={{ marginBottom: 20 }}>Set undeterminate</Button>
        <div>
          <CheckBox
            ref={this.refCheckBox}
            defaultChecked={null}
            supportIndeterminate
          >Checkbox label</CheckBox>
        </div>
      </div>
    }
  }

  return <App />
}