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/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

How to import.

import Toggle from "device-agnostic-ui/Toggle.mjs";

Simple checkbox.

import Toggle from "device-agnostic-ui/Toggle.mjs";

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

Label

Required checkbox.

import Toggle from "device-agnostic-ui/Toggle.mjs";

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

Label

Checkbox with a custom validation message.

import Toggle from "device-agnostic-ui/Toggle.mjs";

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

Label

Radio group.

import Button from "device-agnostic-ui/Button.mjs";

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 from "device-agnostic-ui/Button.mjs";
import Toggle from "device-agnostic-ui/Toggle.mjs";
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 />;