UNPKG

@chakra-ui/core

Version:

Responsive and accessible React UI components built with React and Emotion

69 lines (63 loc) 1.69 kB
import * as React from "react"; import { BoxProps } from "../Box/index"; import { IInput } from "../Input"; import { PseudoBoxProps } from "../PseudoBox"; import { Omit, Merge } from "../common-types"; type SelectAttributes = Omit< React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "disabled" | "required" | "defaultChecked" >; type MergeSelectAttributes = Merge< Omit<PseudoBoxProps, "ref" | "as" | "defaultChecked">, SelectAttributes >; export type ISelect = IInput<HTMLSelectElement> & MergeSelectAttributes & React.RefAttributes<HTMLSelectElement>; export type SelectProps = ISelect & { /** * The props passed to the select's root element. * * The internal structure looks like this: * * ```jsx * <SelectWrapper {...rootProps}> * <Select /> <== most props go here directly * <SelectIconWrapper /> * </SelectWrapper> * ``` * * In some scenario, you might want to pass some other props to the root. */ rootProps?: BoxProps; /** * The placeholder for the select. This renders an `<option>` with empty value * * ```jsx * <option value="">{placeholder}</option> * ``` */ placeholder?: string; /** * The icon component to render. * You can use an icon in Chakra or pass a custom icon * from libraries like `react-icons` * * @example * ```jsx * <Select icon="arrow-down" /> * <Select icon={MdArrowDownward} /> * ``` */ icon?: string | React.ElementType; /** * The size of the icon */ iconSize?: BoxProps["size"]; /** * The color of the icon */ iconColor?: BoxProps["color"]; }; declare const Select: React.FC<SelectProps>; export default Select;