# @askrjs/ui/select

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

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

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

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

### `Select`

```ts
Select: (props: SelectProps) => JSX.Element
```

Renders a part of `select`.

### `SELECT_A11Y_CONTRACT`

```ts
SELECT_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly CONTENT_ROLE: "listbox"; readonly ITEM_ROLE: "option"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; readonly hasPopup: "aria-haspopup"; }; readonly ITEM_SELECTION_ATTRIBUTE: "aria-selected"; }
```

Select accessibility contract.

### `SelectA11yContract`

```ts
SelectA11yContract: typeof SELECT_A11Y_CONTRACT
```

Type of the Select A11y Contract object.

### `SelectContent`

```ts
SelectContent: { (props: SelectContentProps): JSX.Element | null; (props: SelectContentAsChildProps): JSX.Element | null; }
```

Renders a part of `select` with `role="listbox"`.

Supports polymorphic rendering via `asChild`.

### `SelectContentAsChildProps`

```ts
SelectContentAsChildProps: BoxAsChildProps & SelectContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `SelectContentOwnProps`

```ts
SelectContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Select Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `SelectContentProps`

```ts
SelectContentProps: BoxProps<'div', HTMLDivElement> & SelectContentOwnProps
```

Props for Select Content.

- `align`: align?: OverlayAlign | undefined;

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

- `children`: children?: unknown;

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

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `SelectGroup`

```ts
SelectGroup: { (props: SelectGroupProps): JSX.Element; (props: SelectGroupAsChildProps): JSX.Element; }
```

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

Supports polymorphic rendering via `asChild`.

### `SelectGroupAsChildProps`

```ts
SelectGroupAsChildProps: BoxAsChildProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `SelectGroupProps`

```ts
SelectGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Select Group.

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

- `children`: children?: unknown;

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

### `SelectItem`

```ts
SelectItem: { (props: SelectItemProps): JSX.Element | null; (props: SelectItemAsChildProps): JSX.Element | null; }
```

Renders a part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectItemAsChildProps`

```ts
SelectItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & SelectItemOwnProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

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

- `type`: type?: undefined;

- `value`: value: string;

### `SelectItemOwnProps`

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

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

- `children`: children?: unknown;

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

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

- `value`: value: string;

### `SelectItemProps`

```ts
SelectItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & SelectItemOwnProps
```

Props for Select Item.

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

- `children`: children?: unknown;

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

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

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

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

### `SelectItemText`

```ts
SelectItemText: { (props: SelectItemTextProps): JSX.Element; (props: SelectItemTextAsChildProps): JSX.Element; }
```

SelectItemText marks the item text node so Select can resolve labels and
style the text slot directly.
Renders the `select-item-text` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectItemTextAsChildProps`

```ts
SelectItemTextAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Item Text.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `SelectItemTextProps`

```ts
SelectItemTextProps: BoxProps<'span', HTMLSpanElement>
```

Props for Select Item Text.

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

- `children`: children?: unknown;

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

### `SelectLabel`

```ts
SelectLabel: { (props: SelectLabelProps): JSX.Element | null; (props: SelectLabelAsChildProps): JSX.Element | null; }
```

Renders the `select-label` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectLabelAsChildProps`

```ts
SelectLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `SelectLabelProps`

```ts
SelectLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Select Label.

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

- `children`: children?: unknown;

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

### `SelectOwnProps`

```ts
SelectOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  name?: string;
  disabled?: boolean;
}
```

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

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

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

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

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

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

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

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

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

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

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

### `SelectPortal`

```ts
SelectPortal: (props: SelectPortalProps) => JSX.Element | null
```

Renders a part of `select`.

### `SelectPortalProps`

```ts
SelectPortalProps: {
  children?: unknown;
}
```

Props for Select Portal.

- `children`: children?: unknown;

### `SelectProps`

```ts
SelectProps: SelectOwnProps
```

Props for Select.

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

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

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

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

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

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

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

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

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

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

### `SelectSeparator`

```ts
SelectSeparator: { (props: SelectSeparatorProps): JSX.Element | null; (props: SelectSeparatorAsChildProps): JSX.Element | null; }
```

Renders the `select-separator` part of `select` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `SelectSeparatorAsChildProps`

```ts
SelectSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `SelectSeparatorProps`

```ts
SelectSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Select Separator.

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

- `children`: children?: unknown;

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

### `SelectTrigger`

```ts
SelectTrigger: { (props: SelectTriggerProps): JSX.Element | null; (props: SelectTriggerAsChildProps): JSX.Element | null; }
```

Renders the `select-trigger` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectTriggerAsChildProps`

```ts
SelectTriggerAsChildProps: ButtonLikeAsChildProps & SelectTriggerOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

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

- `size`: size?: SelectTriggerSize | undefined;

- `type`: type?: undefined;

### `SelectTriggerOwnProps`

```ts
SelectTriggerOwnProps: {
  size?: SelectTriggerSize;
}
```

Own props for Select Trigger, before merging with native element attributes.

- `size`: size?: SelectTriggerSize | undefined;

### `SelectTriggerProps`

```ts
SelectTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & SelectTriggerOwnProps
```

Props for Select Trigger.

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

- `children`: children?: unknown;

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

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

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

- `size`: size?: SelectTriggerSize | undefined;

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

### `SelectTriggerSize`

```ts
SelectTriggerSize: 'sm' | 'md' | 'lg'
```

Select Trigger Size.

### `SelectValue`

```ts
SelectValue: { (props: SelectValueProps): JSX.Element | null; (props: SelectValueAsChildProps): JSX.Element | null; }
```

Renders the `select-value` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectValueAsChildProps`

```ts
SelectValueAsChildProps: BoxAsChildProps & SelectValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Value.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

### `SelectValueOwnProps`

```ts
SelectValueOwnProps: {
  placeholder?: string;
  children?: unknown;
}
```

Own props for Select Value, before merging with native element attributes.

- `children`: children?: unknown;

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

### `SelectValueProps`

```ts
SelectValueProps: BoxProps<'span', HTMLSpanElement> & SelectValueOwnProps
```

Props for Select Value.

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

- `children`: children?: unknown;

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

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

## Documentation navigation

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