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

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

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

const result = (
  <Toggle inputProps={{ type: "checkbox", required: true }}>Label</Toggle>
);
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>
);
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>
  </>
);
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 />;

Tags