@antadesign/anta
    Preparing search index...

    Interface SwitchPropsUnreviewed

    Common props for JSX component wrappers.

    interface SwitchProps {
        label?: string;
        hint?: ReactNode;
        checked?: boolean;
        defaultChecked?: boolean;
        disabled?: boolean;
        round?: boolean | number | string;
        name?: string;
        value?: string;
        tone?:
            | "brand"
            | "neutral"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        toneScope?: ToneScope;
        size?: "small"
        | "medium"
        | "large";
        labelPosition?: "start" | "end";
        onStateChange?: (
            event: StateChangeEvent,
            detail: { next: boolean; prev: boolean },
        ) => void;
        onChange?: (event: Event) => void;
        onValueChange?: (event: Event, attrs: SwitchChangeAttrs) => void;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `data-${string}`]: unknown

      Any data-* attribute is forwarded to the rendered element.

    • [key: `aria-${string}`]: unknown

      Any aria-* attribute is forwarded to the rendered element.

    Index
    label? hint? checked? defaultChecked? disabled? round? name? value? tone? toneScope? size? labelPosition? onStateChange? onChange? onValueChange? className? style? children? id? title? slot? tabIndex? key?
    label?: string

    Visible, stable label for the setting. Use children for richer label content.

    hint?: ReactNode

    Secondary text rendered under the label and exposed as the switch's accessible description. It does not become part of the accessible name.

    checked?: boolean

    Controlled checked value. In controlled mode, update this in onStateChange.

    defaultChecked?: boolean

    Initial checked value for an uncontrolled switch.

    false
    disabled?: boolean

    Disables interaction and removes the switch from the tab order.

    round?: boolean | number | string

    Fully round the thumb and track. Pass a number (px) or CSS length string for a custom track radius; the thumb radius is 3px smaller.

    name?: string

    Form field name. A checked switch submits value under this name.

    value?: string

    Value submitted while checked.

    "on"
    tone?:
        | "brand"
        | "neutral"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Color of the track and thumb. A tinted tone also colors the unchecked track border and thumb; use toneScope="selected" to color only the checked track.

    'neutral'
    toneScope?: ToneScope

    Apply tone to every state, or only while checked so the unchecked track and thumb stay neutral.

    'all'
    size?: "small" | "medium" | "large"

    Size variant. small=26×16px, medium=30×18px, large=34×20px.

    'medium'
    labelPosition?: "start" | "end"

    Put the visible label before or after the control. Grid layout changes only the visual order, preserving DOM/source order for assistive technologies.

    'end'
    onStateChange?: (
        event: StateChangeEvent,
        detail: { next: boolean; prev: boolean },
    ) => void

    Fired before a user toggle applies. Call event.preventDefault() to veto an uncontrolled change; controlled consumers accept by updating checked.

    onChange?: (event: Event) => void

    Native post-apply change event.

    onValueChange?: (event: Event, attrs: SwitchChangeAttrs) => void

    Post-apply callback with the new form-relevant value snapshot.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    children?: ReactNode

    Child elements. When provided, replaces the component's default label/content.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties