Select

Exports

Import these components from @mbsw/ui.

Select

SelectContent

SelectGroup

SelectItem

SelectItemIndicator

SelectTrigger

SelectValue

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

SelectContent

SelectContent props
Prop	Type	Requirement
`hasFinalSeparator`	`boolean`	Optional

SelectItem

SelectItem props
Prop	Type	Requirement
`leadingIcon`	`ReactNode`	Optional
`size`	`'lg' \| 'md' \| 'sm' \| 'xs'`	Optional

SelectTrigger

SelectTrigger props
Prop	Type	Requirement
`leadingIcon`	`ReactNode`	Optional
`size`	`'lg' \| 'md' \| 'sm' \| 'xs'`	Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, type RefAttributes } from 'react';

import { Select as SelectPrimitive } from 'radix-ui';

export type SelectSize = 'lg' | 'md' | 'sm' | 'xs';

export type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;

export type SelectValueProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;

type SelectTriggerPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'asChild'>;

export type SelectTriggerProps = SelectTriggerPrimitiveProps & {
    leadingIcon?: ReactNode;
    size?: SelectSize;
} & RefAttributes<ComponentRef<typeof SelectPrimitive.Trigger>>;

type SelectContentPrimitiveProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;

export type SelectContentProps = SelectContentPrimitiveProps & {
    hasFinalSeparator?: boolean;
} & RefAttributes<ComponentRef<typeof SelectPrimitive.Content>>;

type SelectItemPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'asChild'>;

export type SelectItemProps = SelectItemPrimitiveProps & {
    leadingIcon?: ReactNode;
    size?: SelectSize;
} & RefAttributes<ComponentRef<typeof SelectPrimitive.Item>>;

export type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof SelectPrimitive.ItemIndicator> & RefAttributes<ComponentRef<typeof SelectPrimitive.ItemIndicator>>;

export declare const Select: import("react").FC<SelectPrimitive.SelectProps>;

export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & RefAttributes<HTMLDivElement>>;

export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & RefAttributes<HTMLSpanElement>>;

export declare function SelectTrigger(props: SelectTriggerProps): import("react").JSX.Element;

export declare function SelectContent({ align, alignOffset, avoidCollisions, children, className, hasFinalSeparator, onFocusCapture, onKeyDown, onPointerDownCapture, onPointerMove, position, ref, sideOffset, ...contentProps }: SelectContentProps): import("react").JSX.Element;

export declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemIndicatorProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;

export declare function SelectItem(props: SelectItemProps): import("react").JSX.Element;