# @askrjs/ui/toggle-group

> Published API exports for @askrjs/ui/toggle-group.

Source: [https://askrjs.com/docs/reference/api/ui/toggle-group](https://askrjs.com/docs/reference/api/ui/toggle-group)

Status: stable. Packages: @askrjs/ui/toggle-group.

**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 11 exports from the declarations shipped by @askrjs/ui.

### `TOGGLE_GROUP_A11Y_CONTRACT`

```ts
TOGGLE_GROUP_A11Y_CONTRACT: { readonly GROUP_ROLE: "group"; readonly ITEM_ROLE: "button"; readonly PRESSED_ATTRIBUTE: "aria-pressed"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

Accessibility contract for toggle groups.

### `ToggleGroup`

```ts
ToggleGroup: (props: ToggleGroupProps) => JSX.Element
```

Renders a part of `toggle-group`.

### `ToggleGroupA11yContract`

```ts
ToggleGroupA11yContract: typeof TOGGLE_GROUP_A11Y_CONTRACT
```

Type of the Toggle Group A11y Contract object.

### `ToggleGroupItem`

```ts
ToggleGroupItem: { (props: ToggleGroupItemProps): JSX.Element; (props: ToggleGroupItemAsChildProps): JSX.Element; }
```

Renders a part of `toggle-group`.

Supports polymorphic rendering via `asChild`.

### `ToggleGroupItemAsChildProps`

```ts
ToggleGroupItemAsChildProps: ButtonLikeAsChildProps & ToggleGroupItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Toggle Group Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

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

- `type`: type?: undefined;

- `value`: value: string;

### `ToggleGroupItemOwnProps`

```ts
ToggleGroupItemOwnProps: {
  value: string;
  disabled?: boolean;
  children?: unknown;
}
```

Own props for Toggle Group Item, before merging with native element attributes.

- `children`: children?: unknown;

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

- `value`: value: string;

### `ToggleGroupItemProps`

```ts
ToggleGroupItemProps: ButtonLikeProps<'button', HTMLButtonElement> & ToggleGroupItemOwnProps
```

Props for Toggle Group Item.

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

- `children`: children?: unknown;

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

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

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

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

### `ToggleGroupMultipleProps`

```ts
ToggleGroupMultipleProps: BoxProps<'div', HTMLDivElement> & ToggleGroupSharedOwnProps & {
  type: 'multiple';
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
}
```

Props for Toggle Group Multiple.

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

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string[] | undefined;

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

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

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

- `onValueChange`: onValueChange?: ((value: string[]) => void) | undefined;

- `orientation`: orientation?: ToggleGroupOrientation | undefined;

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

- `type`: type: "multiple";

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

### `ToggleGroupOrientation`

```ts
ToggleGroupOrientation: 'horizontal' | 'vertical'
```

Toggle Group Orientation.

### `ToggleGroupProps`

```ts
ToggleGroupProps: ToggleGroupSingleProps | ToggleGroupMultipleProps
```

Props for Toggle Group.

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

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string | string[] | undefined;

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

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

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

- `onValueChange`: onValueChange?: ((value: string[]) => void) | ((value: string) => void) | undefined;

- `orientation`: orientation?: ToggleGroupOrientation | undefined;

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

- `type`: type?: "single" | "multiple" | undefined;

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

### `ToggleGroupSingleProps`

```ts
ToggleGroupSingleProps: BoxProps<'div', HTMLDivElement> & ToggleGroupSharedOwnProps & {
  type?: 'single';
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}
```

Props for Toggle Group Single.

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

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

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

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

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

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

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `orientation`: orientation?: ToggleGroupOrientation | undefined;

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

- `type`: type?: "single" | undefined;

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

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/toggle/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/visually-hidden/index.md)