Toggle

A checkbox or radio input.

It implements the <input> element with a type="checkbox" or type="radio" attribute.

Props

`validationMessage`

Type	String (optional)

Sets the <input> validationMessage.

`inputProps`

Type	Object (required)

Props for the <input> element. Must contain either type: 'checkbox' or type: 'radio'.

`children`

Type	JSX children (optional)

Label children. Due to the ancestor <label> element, it may only render phrasing content without <label> elements.

`...props`

Type	…* (optional)

Additional props for the container; a <label> element.

Examples

Simple checkbox.

import { Toggle } from 'device-agnostic-ui'

<Toggle inputProps={{ type: 'checkbox' }}>Label</Toggle>

Label

Required checkbox.

import { Toggle } from 'device-agnostic-ui'

<Toggle inputProps={{ type: 'checkbox', required: true }}>
  Label
</Toggle>

Label

Checkbox with a custom validation message.

import { Toggle } from 'device-agnostic-ui'

<Toggle
  validationMessage="Custom message."
  inputProps={{ type: 'checkbox' }}
>
  Label
</Toggle>

Label

Radio group.

import { Button } from 'device-agnostic-ui'

<Toggle
  inputProps={{
    type: 'radio',
    name: 'options',
    value: 'a',
    defaultChecked: true
  }}
>
  Label A
</Toggle>
<Toggle
  inputProps={{
    type: 'radio',
    name: 'options',
    value: 'b'
  }}
>
  Label B
</Toggle>

Label ALabel B

Using an input element ref.

import { Button, Toggle } from 'device-agnostic-ui'
import React from 'react'

const InputRefExample = () => {
  const ref = React.useRef()
  const onClick = () => ref.current.focus()

  return (
    <>
      <Toggle inputProps={{ type: 'checkbox', ref }} />{' '}
      <Button onClick={onClick}>Focus</Button>
    </>
  )
}

<InputRefExample />