LORA UI

Tabs

Bundle sizeWAI-ARIA

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.

Example

Log in to your account

Welcome back! Please enter your details.

"use client";


import * as Button from "@lora-ui/button";
import * as Tabs from "@lora-ui/tabs";
import * as Checkbox from "@lora-ui/checkbox";


export default function Base() {
  return (
    <Tabs.Root defaultIndex={0}>
      <Tabs.List className="relative flex w-[400px] items-center justify-around rounded-[10px] border border-[#eaecf0] bg-[#f9fafb] p-1 dark:border-[#22262F] dark:bg-[#161b26]">
        <Tabs.Trigger className="group flex-1 outline-offset-2">
          <div className="border-box group-aria-[selected=true]:box-shadow-sm flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold text-[#667085] hover:cursor-pointer group-aria-[selected=true]:bg-[#ffffff] group-aria-[selected=true]:text-[#344054] dark:text-[#94969c] dark:group-aria-[selected=true]:bg-[#0c111d] dark:group-aria-[selected=true]:text-[#cecfd2]">
            Sign in
          </div>
        </Tabs.Trigger>
        <Tabs.Trigger className="group flex-1 outline-offset-2">
          <div className="border-box group-aria-[selected=true]:box-shadow-sm flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold text-[#667085] hover:cursor-pointer group-aria-[selected=true]:bg-[#ffffff] group-aria-[selected=true]:text-[#344054] dark:text-[#94969c] dark:group-aria-[selected=true]:bg-[#0c111d] dark:group-aria-[selected=true]:text-[#cecfd2]">
            Sign up
          </div>
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Panel className="border-box box-shadow-md mt-2 w-[400px] rounded-xl border border-[#eaecf0] bg-[#ffffff] p-6 dark:border-[#333741] dark:bg-[#0c111d]">
        <Tabs.Content>
          <div className="relative flex flex-col items-center">
            <h1 className="mt-6 text-lg font-semibold text-[#101828] dark:text-[#f5f5f6]">
              Log in to your account
            </h1>
            <p className="text-md mt-1 font-normal text-[#475467] dark:text-[#94969c]">
              Welcome back! Please enter your details.
            </p>
          </div>


          <form action="" className="mt-5">
            <fieldset className="flex flex-col">
              <label
                className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
                htmlFor="email"
              >
                Email
              </label>
              <input
                id="email"
                placeholder="Enter your email"
                type="email"
                autoComplete="off"
                defaultValue=""
                className="placeholder:text-md mt-[6px] w-full rounded-[8px] border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-[10px] pl-3 text-[#101828] placeholder:font-normal placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:placeholder:text-[#94969c]"
              />
            </fieldset>
            <fieldset className="mt-5 flex flex-col">
              <label
                className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
                htmlFor="password"
              >
                Password
              </label>
              <input
                id="password"
                placeholder="Create a password"
                type="text"
                autoComplete="off"
                defaultValue=""
                className="placeholder:text-md mt-[6px] w-full rounded-[8px] border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-[10px] pl-3 text-[#101828] placeholder:font-normal placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:placeholder:text-[#94969c]"
              />
            </fieldset>
            <fieldset className="mt-6 flex justify-between">
              <div className="flex items-start">
                <div className="mt-[2px] flex">
                  <Checkbox.Root
                    id="forget-password"
                    defaultChecked
                    className="border-box group relative flex h-[18px] w-[18px] items-center justify-center rounded border border-[#d0d5dd] p-[2px] outline-offset-2 has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#f2f4f7] has-[:indeterminate]:bg-[#7f56d9] has-[:indeterminate]:has-[:disabled]:bg-[#f2f4f7] dark:border-[#333741] dark:has-[:checked]:bg-[#7f56d9] dark:has-[:checked]:has-[:disabled]:bg-[#1f242f] dark:has-[:indeterminate]:bg-[#7f56d9] dark:has-[:indeterminate]:has-[:disabled]:bg-[#1f242f]"
                  >
                    <Checkbox.Indicator className="invisible group-has-[:checked]:visible group-has-[:indeterminate]:visible group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white dark:group-has-[:checked]:group-has-[:disabled]:text-[#85888e]">
                      <svg
                        width="15"
                        height="15"
                        viewBox="0 0 15 15"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                          fill="currentColor"
                          fillRule="evenodd"
                          clipRule="evenodd"
                        />
                      </svg>
                    </Checkbox.Indicator>
                  </Checkbox.Root>
                  <label htmlFor="forget-password">
                    <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
                      Remember me
                    </p>
                  </label>
                </div>
              </div>
              <button className="text-sm font-semibold text-[#6941c6] dark:text-[#cecfd2]">
                Forgot password
              </button>
            </fieldset>
            <div className="mt-6 flex flex-col justify-center space-y-4">
              <button className="text-md box-shadow-xs rounded-[8px] border border-[#7f56d9] bg-[#7f56d9] px-4 py-[10px] font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#7f56d9]">
                Sign in
              </button>
              <button className="text-md font-semiblod box-shadow-xs rounded-[8px] border border-[#d0d5dd] bg-[#ffffff] px-4 py-[10px] text-[#344054] outline-offset-4 hover:bg-[#ffffff] dark:border-[#333741] dark:bg-[#0c111d] dark:text-[#cecfd2]">
                <div className="flex justify-center gap-3">
                  <svg
                    width="25"
                    height="24"
                    viewBox="0 0 25 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clipPath="url(#clip0_7618_2716)">
                      <path
                        id="Vector"
                        d="M24.2663 12.2765C24.2663 11.4608 24.2001 10.6406 24.059 9.83813H12.7402V14.4591H19.222C18.953 15.9495 18.0888 17.2679 16.8233 18.1056V21.104H20.6903C22.9611 19.014 24.2663 15.9274 24.2663 12.2765Z"
                        fill="#4285F4"
                      />
                      <path
                        id="Vector_2"
                        d="M12.7401 24.0008C15.9766 24.0008 18.7059 22.9382 20.6945 21.1039L16.8276 18.1055C15.7517 18.8375 14.3627 19.252 12.7445 19.252C9.61388 19.252 6.95946 17.1399 6.00705 14.3003H2.0166V17.3912C4.05371 21.4434 8.2029 24.0008 12.7401 24.0008Z"
                        fill="#34A853"
                      />
                      <path
                        id="Vector_3"
                        d="M6.00277 14.3002C5.50011 12.8099 5.50011 11.196 6.00277 9.70569V6.61475H2.01674C0.314734 10.0055 0.314734 14.0004 2.01674 17.3912L6.00277 14.3002Z"
                        fill="#FBBC04"
                      />
                      <path
                        id="Vector_4"
                        d="M12.7401 4.74966C14.4509 4.7232 16.1044 5.36697 17.3434 6.54867L20.7695 3.12262C18.6001 1.0855 15.7208 -0.034466 12.7401 0.000808666C8.2029 0.000808666 4.05371 2.55822 2.0166 6.61481L6.00264 9.70575C6.95064 6.86173 9.60947 4.74966 12.7401 4.74966Z"
                        fill="#EA4335"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_7618_2716">
                        <rect
                          width="24"
                          height="24"
                          fill="white"
                          transform="translate(0.5)"
                        />
                      </clipPath>
                    </defs>
                  </svg>
                  Sign in with Google
                </div>
              </button>
            </div>
          </form>
        </Tabs.Content>
        <Tabs.Content>
          <div className="relative flex flex-col items-center">
            <h1 className="mt-6 text-lg font-semibold text-[#101828] dark:text-[#f5f5f6]">
              Create an account
            </h1>
            <p className="text-md mt-1 font-normal text-[#475467] dark:text-[#94969c]">
              Start your 30-day free trial.
            </p>
          </div>


          <form className="mt-5">
            <fieldset className="flex flex-col">
              <label
                htmlFor="name"
                className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
              >
                Name
              </label>
              <input
                id="name"
                placeholder="Enter your name"
                type="text"
                autoComplete="off"
                defaultValue=""
                className="placeholder:text-md mt-[6px] w-full rounded-lg border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-[10px] pl-3 text-[#101828] placeholder:font-normal placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:placeholder:text-[#94969c]"
              />
            </fieldset>
            <fieldset className="mt-5 flex flex-col">
              <label
                htmlFor="email"
                className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
              >
                Email
              </label>
              <input
                id="email"
                placeholder="Enter your email"
                type="text"
                autoComplete="off"
                defaultValue=""
                className="placeholder:text-md mt-[6px] w-full rounded-lg border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-[10px] pl-3 text-[#101828] placeholder:font-normal placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:placeholder:text-[#94969c]"
              />
            </fieldset>
            <fieldset className="mt-5 flex flex-col">
              <label
                htmlFor="password"
                className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
              >
                Password
              </label>
              <input
                id="password"
                placeholder="Create a password"
                type="text"
                autoComplete="off"
                defaultValue=""
                className="placeholder:text-md mt-[6px] w-full rounded-lg border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-[10px] pl-3 text-[#101828] placeholder:font-normal placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:placeholder:text-[#94969c]"
              />
            </fieldset>
            <p className="mt-[6px] text-sm font-normal text-[#475467] dark:text-[#94969c]">
              Must be at least 8 characters.
            </p>


            <div className="mt-6 flex flex-col justify-center space-y-4">
              <button className="text-md box-shadow-xs rounded-[8px] border border-[#7f56d9] bg-[#7f56d9] px-4 py-[10px] font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#7f56d9]">
                Sign up
              </button>
            </div>
          </form>
        </Tabs.Content>
      </Tabs.Panel>
    </Tabs.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/tabs

API Reference

Root

PropTypeDefaultExplanation
defaultIndexNumber0initial active index

List

PropTypeDefaultExplanation

Trigger

PropTypeDefaultExplanation

Panel

PropTypeDefaultExplanation

Content

PropTypeDefaultExplanation

Keyboard

CommandDescription
Tab
or
Shift+Tab
  • When focus moves into the tab list, places focus on the active tab element.
  • When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.
ArrowLeft
Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab
ArrowRight
Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab
Home
Moves focus to the first tab. Optionally, activates the newly focused tab
End
Moves focus to the last tab. Optionally, activates the newly focused tab

Other

All relevant ARIA attributes are automatically managed.