Schimbă

Prezentare generală

Folosește Switch pentru o preferință activată sau dezactivată. Oferă controlului o etichetă vizibilă sau un nume accesibil.

Utilizare

Stare necontrolată

Utilizează defaultChecked pentru a seta starea inițială de bifare. Comutatorul gestionează modificările ulterioare.

import { useId } from 'react';
import { Switch } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const NotificationsPreference = () => {
  const switchId = useId();

  return (
    <label
      htmlFor={switchId}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}
    >
      <Switch id={switchId} name="notifications" />
      <Text render={<span />}>Email notifications</Text>
    </label>
  );
};

Opțiuni vizuale

Comparați cele două dimensiuni în stările pornit, oprit, dezactivat, doar în citire și focalizare. Folosiți exemplele active pentru a încerca comutarea.

Stare controlată

Transmite checked și actualizează-l cu onCheckedChange pentru a gestiona aceeași preferință în starea React.

import { useId, useState } from 'react';
import { Switch } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const NotificationsPreference = () => {
  const switchId = useId();
  const [checked, setChecked] = useState(false);

  return (
    <label
      htmlFor={switchId}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}
    >
      <Switch
        id={switchId}
        name="notifications"
        checked={checked}
        onCheckedChange={setChecked}
      />
      <Text render={<span />}>Email notifications</Text>
    </label>
  );
};

onCheckedChange primește următoarea valoare booleană și detaliile evenimentului. Proprietatea size acceptă sm sau md și are implicit valoarea md. Pentru un rând consecvent pe toată lățimea, cu o pictogramă, o descriere și un comutator, utilizați SettingsRow.

Tastatură și formulare

Tasta Tab mută focalizarea pe comutator; tasta Spațiu îl comută. Făcând clic pe eticheta asociată, acesta este de asemenea comutat. Folosește disabled pentru a preveni interacțiunea sau readOnly pentru a păstra un control focalizabil a cărui valoare nu poate fi modificată. Un comutator cu nume trimite valoarea sa când este activat. Folosește value pentru a particulariza acea valoare și uncheckedValue dacă formularul trebuie să trimită o valoare și când acesta este dezactivat.

Părți și conținut personalizat

Switch asamblează rădăcina stilizată și elementul Thumb implicit. Utilizați Switch.Root cu Switch.Thumb pentru a deține conținutul elementului Thumb. Root gestionează starea și aspectul pistei; Thumb redă conținutul pe care îl furnizați.

import { Switch } from 'twenty-ui/primitives/input';

export const CustomPreference = () => (
  <Switch.Root aria-label="Updates" defaultChecked>
    <Switch.Thumb></Switch.Thumb>
  </Switch.Root>
);

SwitchRootProps și SwitchThumbProps sunt tipuri publice exportate din twenty-ui/primitives/input. Ambele părți acceptă atribute native, handleri, ref-uri, render și callbackuri className și style bazate pe stare. ref al lui Root vizează controlul vizibil; inputRef vizează inputul nativ. Ref-ul părții vizează elementul său redat. Transmiteți nativeButton cu render={<button />} atunci când înlocuiți Root cu un buton. Proprietățile de aspect aparțin Root; clasele și stilurile explicite sunt îmbinate cu valorile implicite. Thumb primește starea curentă checked, disabled, readOnly, required și Field. Poziția sa urmează direcția de citire. Ansamblul apelabil și tipul său SwitchProps rămân acceptate. Înlocuiți ansamblul cu Root și partea sa atunci când furnizați conținut Thumb personalizat, în loc să adăugați o altă parte la elementele copil ale ansamblului. Pentru resetarea controlată a formularului, gestionați onReset al formularului și restaurați checked la valoarea inițială. Base UI 1.8 nu restaurează starea componentelor necontrolate la resetarea nativă a formularului. required, form, value și uncheckedValue păstrează comportamentul upstream al inputului nativ.

Proprietăți

Documentația de referință include proprietăți specifice componentei și proprietăți Base UI moștenite. Sunt acceptate și atribute native precum aria-label și data-*.

boolean

Whether the switch is currently active.To render an uncontrolled switch, use the defaultChecked prop instead.

string | ((state: SwitchRootState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

implicit:"false"

Whether the switch is initially active.To render a controlled switch, use the checked prop instead.

boolean

implicit:"false"

Whether the component should ignore user interaction.

string

Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form.

string

The id of the hidden input element.When nativeButton is true, the id is applied to the root element.

Ref<HTMLInputElement>

A ref to access the hidden <input> element.

string

Identifies the field when a form is submitted.

boolean

implicit:"false"

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)

Event handler called when the switch is activated or deactivated.

boolean

implicit:"false"

Whether the user should be unable to activate or deactivate the switch.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

boolean

implicit:"false"

Whether the user must activate the switch before submitting a form.

"md" | "sm"

implicit:"md"

Visual size of the switch.

CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

string

The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior.

string

The value submitted with the form when the switch is on. By default, switch submits the “on” value, matching native checkbox behavior.

Switch.Root

boolean

Whether the switch is currently active.To render an uncontrolled switch, use the defaultChecked prop instead.

string | ((state: SwitchRootState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

implicit:"false"

Whether the switch is initially active.To render a controlled switch, use the checked prop instead.

boolean

implicit:"false"

Whether the component should ignore user interaction.

string

Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form.

string

The id of the hidden input element.When nativeButton is true, the id is applied to the root element.

Ref<HTMLInputElement>

A ref to access the hidden <input> element.

string

Identifies the field when a form is submitted.

boolean

implicit:"false"

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

Event handler called when the switch is activated or deactivated.

boolean

implicit:"false"

Whether the user should be unable to activate or deactivate the switch.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

boolean

implicit:"false"

Whether the user must activate the switch before submitting a form.

"md" | "sm"

implicit:"md"

Visual size of the switch.

CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

string

The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior.

string

The value submitted with the form when the switch is on. By default, switch submits the “on” value, matching native checkbox behavior.

Switch.Thumb

string | ((state: SwitchThumbState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchThumbState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SwitchThumbState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Stare necontrolată

Opțiuni vizuale

Stare controlată

Tastatură și formulare

Părți și conținut personalizat

Proprietăți

Switch.Root

Switch.Thumb

​Prezentare generală

​Utilizare

​Stare necontrolată

​Opțiuni vizuale

​Stare controlată

​Tastatură și formulare

​Părți și conținut personalizat

​Proprietăți

​Switch.Root

​Switch.Thumb

Prezentare generală

Utilizare

Stare necontrolată

Opțiuni vizuale

Stare controlată

Tastatură și formulare

Părți și conținut personalizat

Proprietăți

Switch.Root

Switch.Thumb