# @askrjs/ui/radio-group

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

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

Status: stable. Packages: @askrjs/ui/radio-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 9 exports from the declarations shipped by @askrjs/ui.

### `RADIO_GROUP_A11Y_CONTRACT`

```ts
RADIO_GROUP_A11Y_CONTRACT: { readonly GROUP_ROLE: "radiogroup"; readonly ITEM_ROLE: "radio"; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; readonly KEYBOARD_NAVIGATION: readonly ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]; readonly ROVING_FOCUS: { readonly activeItemTabIndex: 0; readonly inactiveItemTabIndex: -1; }; readonly FORM_INTEGRATION: { readonly hiddenInputType: "hidden"; }; }
```

WAI-ARIA Radio Group Pattern

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

### `RadioGroup`

```ts
RadioGroup: (props: RadioGroupProps) => JSX.Element
```

Renders a part of `radio-group`.

### `RadioGroupA11yContract`

```ts
RadioGroupA11yContract: typeof RADIO_GROUP_A11Y_CONTRACT
```

Type of the Radio Group A11y Contract object.

### `RadioGroupItem`

```ts
RadioGroupItem: { (props: RadioGroupItemProps): JSX.Element; (props: RadioGroupItemAsChildProps): JSX.Element; }
```

Renders the `radio-group-item` part of `radio-group` with `role="radio"`.

Supports polymorphic rendering via `asChild`.

### `RadioGroupItemAsChildProps`

```ts
RadioGroupItemAsChildProps: RadioGroupItemOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

- `value`: value: string;

### `RadioGroupItemOwnProps`

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

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

- `children`: children?: unknown;

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

- `value`: value: string;

### `RadioGroupItemProps`

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

Props for Radio Group Item.

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

- `children`: children?: unknown;

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

- `value`: value: string;

### `RadioGroupOwnProps`

```ts
RadioGroupOwnProps: {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  disabled?: boolean;
  name?: string;
  orientation?: Orientation;
  loop?: boolean;
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
}
```

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

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

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

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

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

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

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

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

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

### `RadioGroupProps`

```ts
RadioGroupProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & RadioGroupOwnProps & {
  ref?: Ref<HTMLDivElement>;
}
```

Props for Radio Group.

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

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

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

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

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

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

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

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

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

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/progress-circle/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/select/index.md)