LORA UI

Toggle

Bundle size

A set of two-state buttons that can be toggled on or off.

Multiple

"use client";


import * as Toggle from "@lora-ui/toggle";


export default function Multiple() {
  function onActiveChange(actives) {
    console.log(actives);
  }
  return (
    <div className="flex justify-center space-x-20">
      <Toggle.Root onActiveChange={onActiveChange}>
        <Toggle.Group className="flex items-center">
          <Toggle.Item className="-ml-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2.5 4C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H12.5C12.7761 5 13 4.77614 13 4.5C13 4.22386 12.7761 4 12.5 4H2.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item
            isDisabled
            className="-ml-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:data-[active=true]:bg-[#333741]"
          >
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-ml-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
        </Toggle.Group>
      </Toggle.Root>
      <Toggle.Root onActiveChange={onActiveChange}>
        <Toggle.Group className="flex flex-col">
          <Toggle.Item
            isDisabled
            className="-mt-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:mt-0 first:rounded-t-md last:rounded-b-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] aria-pressed:bg-[#eaecf0] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:aria-pressed:bg-[#333741] dark:data-[active=true]:bg-[#333741]"
          >
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2.5 4C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H12.5C12.7761 5 13 4.77614 13 4.5C13 4.22386 12.7761 4 12.5 4H2.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-mt-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:mt-0 first:rounded-t-md last:rounded-b-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] aria-pressed:bg-[#eaecf0] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:aria-pressed:bg-[#333741] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-mt-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:mt-0 first:rounded-t-md last:rounded-b-md focus:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] aria-pressed:bg-[#eaecf0] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:aria-pressed:bg-[#333741] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
        </Toggle.Group>
      </Toggle.Root>
    </div>
  );
}

Single

"use client";


import * as Toggle from "@lora-ui/toggle";


export default function Single() {
  function onActiveChange(actives) {
    console.log(actives);
  }
  return (
    <div className="flex justify-center space-x-20">
      <Toggle.Root mode="single" onActiveChange={onActiveChange}>
        <Toggle.Group className="flex items-center">
          <Toggle.Item
            isDisabled
            className="-ml-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:data-[active=true]:bg-[#333741]"
          >
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2.5 4C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H12.5C12.7761 5 13 4.77614 13 4.5C13 4.22386 12.7761 4 12.5 4H2.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-ml-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-ml-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
        </Toggle.Group>
      </Toggle.Root>
      <Toggle.Root mode="single" onActiveChange={onActiveChange}>
        <Toggle.Group className="flex flex-col">
          <Toggle.Item
            isDisabled
            className="-mt-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:mt-0 first:rounded-t-md last:rounded-b-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] aria-pressed:bg-[#eaecf0] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:aria-pressed:bg-[#333741] dark:data-[active=true]:bg-[#333741]"
          >
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2.5 4C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H12.5C12.7761 5 13 4.77614 13 4.5C13 4.22386 12.7761 4 12.5 4H2.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-mt-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:mt-0 first:rounded-t-md last:rounded-b-md focus-visible:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] aria-pressed:bg-[#eaecf0] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:aria-pressed:bg-[#333741] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
          <Toggle.Item className="-mt-px box-border flex items-center justify-center whitespace-nowrap border border-[#eaecf0] p-2 text-sm font-semibold text-[#475467] first:mt-0 first:rounded-t-md last:rounded-b-md focus:z-10 disabled:bg-[#f2f4f7] disabled:text-[#667085] aria-pressed:bg-[#eaecf0] data-[active=true]:bg-[#eaecf0] dark:border-[#1f242f] dark:text-[#94969c] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e] dark:aria-pressed:bg-[#333741] dark:data-[active=true]:bg-[#333741]">
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Toggle.Item>
        </Toggle.Group>
      </Toggle.Root>
    </div>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/toggle

API Reference

Root

PropTypeDefaultExplanation
modeString"single""single" | "multiple"

Group

PropTypeDefaultExplanation

Item

PropTypeDefaultExplanation
isDisabledBooleanfalse
isActiveBooleanfalse

Keyboard

CommandDescription
ArrowLeft
Moves focus to the previous toggle item. If focus is on the first toggle item, moves focus to the last toggle item. Optionally, activates the newly focused item
ArrowRight
Moves focus to the next toggle item. If focus is on the last toggle element, moves focus to the first toggle item. Optionally, activates the newly focused item
Home
Moves focus to the first focusable toggle item. Optionally, activates the newly focused item
End
Moves focus to the last focusable toggle item. Optionally, activates the newly focused item
Tab
Move focus to the next focusable element
Shift+Tab
Move focus to the previous focusable element

Other

All relevant ARIA attributes are automatically managed.