Toggle

A toggle is used to switch between two options or states. It typically has two states on or off.

Basic

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const Basic = () => {
  return (
    <div className="flex gap-8">
      <Toggle defaultChecked />
      <Toggle />
      <Toggle disabled />
      <Toggle disabled checked={true} />
      <Toggle readOnly defaultChecked />
    </div>
  );

With Label

  • Label can be added via children of Toggle component.

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const WithLabel = () => {
  return (
    <div className="flex flex-col items-start gap-8">
      <Toggle>Label</Toggle>
      <Toggle defaultChecked>Default On</Toggle>
      <Toggle>
        The long content explains
        <br />
        the purpose and effectiveness of the toggle
      </Toggle>

Sizes

  • Toggle supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const Sizes = () => {
  return (
    <div className="flex gap-8 flex-col items-start">
      <Toggle size="lg">Size lg</Toggle>
      <Toggle size="md">Size md</Toggle>
      <Toggle size="sm">Size sm</Toggle>
    </div>
  );
};
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const ResponsiveSize = () => {
  return (
    <div className="flex gap-8 flex-col items-start">
      <Toggle size="responsive">Size responsive</Toggle>
    </div>
  );
};

Disabled

  • Disabled state can be enabled by setting disabled prop to true.

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const Disabled = () => {
  return (
    <div className="flex gap-8 flex-col ">
      <Toggle disabled>Disabled</Toggle>
      <Toggle disabled defaultChecked>
        On
      </Toggle>
    </div>
  );
};

ReadOnly

  • ReadOnly state can be enabled by setting readOnly prop to true.

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const ReadOnly = () => {
  return (
    <div className="flex gap-8 flex-col">
      <Toggle readOnly>ReadOnly</Toggle>
      <Toggle readOnly defaultChecked>
        On
      </Toggle>
    </div>
  );
};

Label alignment

  • Label can be placed to the right or left of the toggle by setting labelAlignment prop to left | right.
  • Default labelAlignment is right.

Source Code

import { Toggle } from '@ocean-network-express/magenta-ui/react';

export const LabelAlignment = () => {
  return (
    <div className="flex gap-16">
      <div className="flex gap-8 flex-col">
        <Toggle>Right Alignment</Toggle>
        <Toggle>
          The long content explains the purpose
          <br />
          and effectiveness of the toggle
        </Toggle>

Toggle Group

  • FormCheck is a helpful wrapper used to group toggle components that provides an easier API.
Phone settings
This is anonymous

Source Code

import { FormCheck, Toggle } from '@ocean-network-express/magenta-ui/react';

export const ToggleGroup = () => {
  return (
    <FormCheck
      label={'Phone settings'}
      helperText={'This is anonymous'}
      name={'phoneSettings'}
      required
    >
      <Toggle value="airplaneMode" defaultChecked>
        Airplane mode

Accessibility

Toggle is a regular input[type="checkbox"] follow WAI-ARIA recommendations.

Roles, States, and Properties

  • Toggle has role="switch".
  • Toggle has an accessible label provided by a visible label referenced by the value of aria-labelledby set on the element with role switch.
  • Toggle uses the HTML checked attribute to indicate its state:
  • checked="true" indicates the toggle is on.
  • checked="false" indicates the toggle is off.
  • If a set of toggles is presented as a logical group with a visible label, either:
  • The toggles are included in an element with role group.
  • The group element has the property aria-labelledby set to the ID of the element containing the group label.
  • The group element has the property aria-describedby set to the ID of the element containing the group description.

Keyboard interactions

Key

Function

Condition

Tab

Moves keyboard focus to the toggle.

Space

Changes the state of the toggle between on and off.

When the toggle has focus.

Was this page helpful?