Switch

Stable
WCAG 2.2 evidence
RTL
Web · iOS · Android

An on/off setting that applies immediately. Built on React Aria SwitchField + SwitchButton: a native checkbox with role="switch" stays in the DOM (visually hidden) so forms and form reset work; Tab focuses it and Space toggles it (WCAG 2.1.1, 4.1.2). On is shown by the thumb position (and the Android check mark), not by colour alone (1.4.1); keyboard focus draws the ring on the track (2.4.7); the pointer target is at least 24 px tall on web and 44 pt / 48 dp on iOS / Android (2.5.8). Consumer duties: the name says what is switched on, as a positive statement ("Email me about leave requests", not "Disable emails"); announce the effect when it is not visible. Use SwitchField for a label with helper text and Checkbox for choices applied on submit.

import { Switch } from "@nexera-ui/react";

Loading example…

5
examples: 28
props: 7
live controls: 3
platforms: 8
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { Switch } from "@nexera-ui/react";

<Switch />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Sizes and values

Both Figma sizes, off and on (isSelected / defaultSelected). Hover, press and Tab to see the other states.

Loading example…

app.tsx

import { Switch } from "@nexera-ui/react";

const sizes = ["sm", "md"] as const;

export function SizesAndValues() {
  return (
    <div className="flex flex-col gap-4">
      {sizes.map((size) => (
        <div key={size} className="flex items-center gap-6">
          <Switch size={size} aria-label={`Off ${size}`} />
          <Switch size={size} aria-label={`On ${size}`} defaultSelected />
          <Switch size={size} aria-label={`Disabled off ${size}`} isDisabled />
          <Switch size={size} aria-label={`Disabled on ${size}`} isDisabled defaultSelected />
        </div>
      ))}
    </div>
  );
}

Platforms

Figma Switch Mobile merged through platform: iOS 51 x 31 pt with a 27 pt thumb, Android 52 x 32 dp with a handle that grows and shows a check mark when on. size applies to web only.

Loading example…

app.tsx

import { Switch } from "@nexera-ui/react";

const platforms = ["web", "ios", "android"] as const;

export function Platforms() {
  return (
    <div className="flex flex-col gap-6">
      {platforms.map((platform) => (
        <div key={platform} className="flex items-center gap-6">
          <span className="w-16 text-body-caption text-secondary">{platform}</span>
          <Switch platform={platform} aria-label={`${platform} off`} />
          <Switch platform={platform} aria-label={`${platform} on`} defaultSelected />
          <Switch platform={platform} aria-label={`${platform} disabled`} isDisabled />
          <Switch
            platform={platform}
            aria-label={`${platform} disabled on`}
            isDisabled
            defaultSelected
          />
        </div>
      ))}
    </div>
  );
}

With label

With a visible label (children); the label wraps. Use SwitchField for a setting row with helper text.

Loading example…

app.tsx

import { Switch } from "@nexera-ui/react";

export function WithLabel() {
  return (
    <div className="flex max-w-xs flex-col gap-3">
      <Switch defaultSelected>Dark mode</Switch>
      <Switch>Email me about every leave request on my team, including half days</Switch>
    </div>
  );
}

Right to left

Right-to-left: the thumb starts on the right and moves left when on (logical margin).

Loading example…

app.tsx

import { Switch } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-3">
      <Switch>الوضع الداكن</Switch>
      <Switch defaultSelected>إشعارات البريد الإلكتروني</Switch>
      <Switch platform="android" defaultSelected>
        أندرويد
      </Switch>
    </div>
  );
}

Props 28

Press "Try it" on a card to load that prop into the playground.

sizeNexera

"sm" | "md"

Track size on web: 28 x 16 px (sm) or 36 x 20 px (md). iOS and Android have one size each, so size is ignored there.

platformNexera

"web" | "ios" | "android"

Platform look. Defaults to the NexeraProvider platform.

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

childrenNexera

VisibleContent

Visible label after the track (Component/Label). It is the accessible name, wraps and is never truncated. For a label with helper text use SwitchField. No visible label.

aria-labelNexera

string

Overrides the name given by children. Avoid: the name must contain the visible text (WCAG 2.5.3). Accessible name: the setting, for example "Email me about leave requests". Translate it. Accessible name; aria-labelledby wins when both are set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the switch instead of children. Id(s) of element(s) that name the switch; wins over aria-label. Id(s) of visible element(s) that name the switch.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

valueReact Aria

string

The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).

defaultSelectedReact Aria

boolean

Whether the element should be selected (uncontrolled).

isSelectedReact Aria

boolean

Whether the element should be selected (controlled).

onChangeReact Aria

(isSelected: boolean) => void

Handler that is called when the element's selection state changes.

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the input value is invalid.

validateReact Aria

(value: boolean) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

inputRefReact Aria

Ref<HTMLInputElement | null>

A ref for the HTML input element.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-readonly
data-selected

Usage

<Switch className="data-disabled:opacity-90 shadow-sm" />

Theme studio

Switch

Try every prop. Copy the code.

Examples 4

Sizes and values

Platforms

With label

Right to left

Props 28

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components