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

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

Deep import.
import Toggle from 'device-agnostic-ui/public/components/Toggle.js';
Deep require.
const Toggle = require('device-agnostic-ui/public/components/Toggle');
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>;
Required checkbox.
import { Toggle } from 'device-agnostic-ui';

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

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

Tags