Toggle

A checkbox or radio input.

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

Styles

Import the styles within a Next.js custom app in pages/_app.js.

import 'device-agnostic-ui/public/components/Toggle.css';

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

Deep import.

import Toggle from 'device-agnostic-ui/public/components/Toggle.js';

Deep require.

const Toggle = require('device-agnostic-ui/public/components/Toggle.js');

Index import. Convenient, but technically inferior to a deep import.

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

Index require. Convenient, but technically inferior to a deep require.

const { Toggle } = require('device-agnostic-ui');

Simple checkbox.

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

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

Label

Required checkbox.

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

const result = (
  <Toggle inputProps={{ type: 'checkbox', required: true }}>Label</Toggle>
);

Label

Checkbox with a custom validation message.

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

const result = (
  <Toggle validationMessage="Custom message." inputProps={{ type: 'checkbox' }}>
    Label
  </Toggle>
);

Label

Radio group.

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

const result = (
  <>
    <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>
    </>
  );
};

const result = <InputRefExample />;