@stratakit/bricks/dist/Select.d.ts

Small, modular components for StrataKit

import * as React from "react";
import type { FocusableProps } from "@stratakit/foundations/secret-internals";
/**
 * Compound component for a select element, which allows the user to select a value from a list of options.
 *
 * Use with the `Field` components to automatically handle ID associations for
 * labels and descriptions:
 * ```tsx
 * <Field.Root>
 *   <Field.Label>Fruit</Field.Label>
 *   <Field.Control
 *     render={(controlProps) => (
 *       <Select.Root>
 *         <Select.HtmlSelect name="fruit" {...controlProps}>
 *           <option value="kiwi">Kiwi</option>
 *           <option value="mango">Mango</option>
 *           <option value="papaya">Papaya</option>
 *         </Select.HtmlSelect>
 *       </Select.Root>
 *     )}
 *   />
 * </Field.Root>
 * ```
 *
 * Without the `Field` components you will need to manually associate labels,
 * descriptions, etc.:
 * ```tsx
 * <Label htmlFor="fruit">Fruit</Label>
 * <Description id="fruit-description">Something to include in a fruit salad.</Description>
 * <Select.Root>
 *   <Select.HtmlSelect id="fruit" aria-describedby="fruit-description">
 *     <option value="kiwi">Kiwi</option>
 *     <option value="mango">Mango</option>
 *     <option value="papaya">Papaya</option>
 *   </Select.HtmlSelect>
 * </Select.Root>
 * ```
 */
declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
interface HtmlSelectProps extends HtmlSelectBaseProps {
    /**
     * The variant of the `HtmlSelect`, i.e. solid, outline, or ghost.
     *
     * @default "solid"
     */
    variant?: "solid" | "outline" | "ghost";
}
/**
 * The actual select element to be used inside `Select.Root`. This is a wrapper around the
 * HTML `<select>` element and should render HTML `<option>` elements as children.
 *
 * Example usage:
 * ```tsx
 * <Select.HtmlSelect>
 *   <option value="1">Option 1</option>
 *   <option value="2">Option 2</option>
 *   <option value="3">Option 3</option>
 * </Select.HtmlSelect>
 * ```
 *
 * The usage of this component largely mirrors how the `<select>` element would be used in React.
 * You can use the same familiar props, including `name`, `defaultValue`, `value`, `onChange`, etc.
 *
 * @see https://react.dev/reference/react-dom/components/select
 */
declare const HtmlSelect: React.ForwardRefExoticComponent<HtmlSelectProps & React.RefAttributes<HTMLElement | HTMLSelectElement>>;
export { SelectRoot as Root, HtmlSelect };