# @askrjs/ui/switch

> Published API exports for @askrjs/ui/switch.

Source: [https://askrjs.com/docs/reference/api/ui/switch](https://askrjs.com/docs/reference/api/ui/switch)

Status: stable. Packages: @askrjs/ui/switch.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 7 exports from the declarations shipped by @askrjs/ui.

### `Switch`

```ts
Switch: { (props: SwitchButtonProps): JSX.Element; (props: SwitchAsChildProps): JSX.Element; }
```

Renders the `switch` part of `switch` with `role="switch"`.

Supports polymorphic rendering via `asChild`.

### `SWITCH_A11Y_CONTRACT`

```ts
SWITCH_A11Y_CONTRACT: { readonly ROLE: "switch"; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly KEYBOARD_ACTIVATION: readonly ["Space"]; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly DISABLED_ATTRIBUTES: { readonly nativeButton: { readonly disabled: true; readonly "aria-disabled": "true"; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly FORM_INTEGRATION: { readonly host: "button"; readonly hiddenInputType: "checkbox"; readonly hiddenInputValue: "on"; }; }
```

WAI-ARIA Switch Pattern

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/switch/

### `SwitchA11yContract`

```ts
SwitchA11yContract: typeof SWITCH_A11Y_CONTRACT
```

Type of the Switch A11y Contract object.

### `SwitchAsChildProps`

```ts
SwitchAsChildProps: SwitchOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
  type?: never;
}
```

Props for the `asChild` (polymorphic) rendering of Switch.

- `asChild`: asChild: true;

- `checked`: checked?: boolean | undefined;

- `children`: children: JSXElement;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `required`: required?: boolean | undefined;

- `type`: type?: undefined;

- `value`: value?: string | undefined;

### `SwitchButtonProps`

```ts
SwitchButtonProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'type' | 'ref'> & SwitchOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}
```

Props for Switch Button.

- `asChild`: asChild?: false | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `required`: required?: boolean | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `SwitchOwnProps`

```ts
SwitchOwnProps: {
  children?: unknown;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  value?: string;
}
```

Own props for Switch, before merging with native element attributes.

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `SwitchProps`

```ts
SwitchProps: SwitchButtonProps | SwitchAsChildProps
```

Props for Switch.

- `asChild`: asChild?: boolean | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;

- `required`: required?: boolean | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/slider/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/table/index.md)