Askr documentation
Generated API snapshot

@askrjs/ui/select

Exports from the declarations published in @askrjs/ui. Signatures reflect the published artifact.

Exports

This entrypoint publishes 36 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

Selecttype

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

Renders a part of `select`.

SELECT_A11Y_CONTRACTtype

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.

SelectA11yContracttype

SelectA11yContract: typeof SELECT_A11Y_CONTRACT

Type of the Select A11y Contract object.

SelectContenttype

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

Renders a part of `select` with `role="listbox"`. Supports polymorphic rendering via `asChild`.

SelectContentAsChildPropstype

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;

SelectContentOwnPropstype

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;

SelectContentPropstype

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;

SelectGrouptype

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

Renders the `select-group` part of `select` with `role="group"`. Supports polymorphic rendering via `asChild`.

SelectGroupAsChildPropstype

SelectGroupAsChildProps: BoxAsChildProps

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

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectGroupPropstype

SelectGroupProps: BoxProps<'div', HTMLDivElement>

Props for Select Group.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SelectItemtype

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

Renders a part of `select`. Supports polymorphic rendering via `asChild`.

SelectItemAsChildPropstype

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;

SelectItemOwnPropstype

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;

SelectItemPropstype

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;

SelectItemTexttype

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`.

SelectItemTextAsChildPropstype

SelectItemTextAsChildProps: BoxAsChildProps

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

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectItemTextPropstype

SelectItemTextProps: BoxProps<'span', HTMLSpanElement>

Props for Select Item Text.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLSpanElement>;

SelectLabeltype

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

Renders the `select-label` part of `select`. Supports polymorphic rendering via `asChild`.

SelectLabelAsChildPropstype

SelectLabelAsChildProps: BoxAsChildProps

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

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectLabelPropstype

SelectLabelProps: BoxProps<'div', HTMLDivElement>

Props for Select Label.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SelectOwnPropstype

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;

SelectPortaltype

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

Renders a part of `select`.

SelectPortalPropstype

SelectPortalProps: {
  children?: unknown;
}

Props for Select Portal.

children
children?: unknown;

SelectPropstype

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;

SelectSeparatortype

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`.

SelectSeparatorAsChildPropstype

SelectSeparatorAsChildProps: BoxAsChildProps

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

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectSeparatorPropstype

SelectSeparatorProps: BoxProps<'div', HTMLDivElement>

Props for Select Separator.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SelectTriggertype

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

Renders the `select-trigger` part of `select`. Supports polymorphic rendering via `asChild`.

SelectTriggerAsChildPropstype

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;

SelectTriggerOwnPropstype

SelectTriggerOwnProps: {
  size?: SelectTriggerSize;
}

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

size
size?: SelectTriggerSize | undefined;

SelectTriggerPropstype

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;

SelectValuetype

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

Renders the `select-value` part of `select`. Supports polymorphic rendering via `asChild`.

SelectValueAsChildPropstype

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>;

SelectValueOwnPropstype

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

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

children
children?: unknown;
placeholder
placeholder?: string | undefined;

SelectValuePropstype

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

Props for Select Value.

asChild
asChild?: false | undefined;
children
children?: unknown;
placeholder
placeholder?: string | undefined;
ref
ref?: Ref<HTMLSpanElement>;