Toggle

A checkbox or radio input.

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

Props

inputProps

TypeObject (required)

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

...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>
Required checkbox.
import { Toggle } from 'device-agnostic-ui'

<Toggle inputProps={{ type: 'checkbox', required: true }}>
  Label
</Toggle>
Checkbox with a custom validation message.
import { Toggle } from 'device-agnostic-ui'

<Toggle
  validationMessage="Custom message."
  inputProps={{ type: 'checkbox' }}
>
  Label
</Toggle>
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>
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 />

Tags