@cerberus-design/react/dist/components/select/select.d.ts

The Cerberus Design React component library.

import { RefObject } from 'react';
import { SelectRootProps } from './primitives';
/**
 * This module contains the Select components.
 * @module 'react/select'
 */
export interface SelectCollectionItem {
    /**
     * What is displayed in the dropdown list.
     */
    label: string;
    /**
     * The value of the selected item used in the form.
     */
    value: string;
    /**
     * If the item is disabled.
     */
    disabled?: boolean;
}
export interface SelectCollection {
    /**
     * The items to be displayed in the dropdown list.
     */
    items: SelectCollectionItem[];
}
export interface SelectProps extends Omit<SelectRootProps, 'container'> {
    /**
     * The placeholder text when no option is selected.
     */
    placeholder?: string;
    /**
     * The container element to render the Select dropdown in. This is used
     * to render the Select dropdown in a specific context, such as a modal.
     * @default document.body
     */
    container?: RefObject<HTMLElement | null>;
}
/**
 * The Select component is a dropdown list that allows users to select an
 * option from a list.
 * @definition [Select docs](https://cerberus.digitalu.design/react/select)
 * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
 * @example
 * ```tsx
 * import { Select, Option, createListCollection } from '@cerberus-design/react'
 *
 * export function SelectBasicPreview() {
 *  const collection = createListCollection({
 *   items: [
 *    { label: 'Hades', value: 'hades' },
 *    { label: 'Persephone', value: 'persephone' },
 *    { label: 'Zeus', value: 'zeus', disabled: true },
 *   ]
 *  })
 *
 *  return (
 *   <Select
 *    collection={collection}
 *    label="Select Relative"
 *    placeholder="Choose option"
 *   >
 *   {collection.items.map((item) => (
 *    <Option key={item.value} item={item} />
 *   ))}
 *  </Select>
 *  )
 * }
 */
export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;