@chakra-ui/core
Version:
Responsive and accessible React UI components built with React and Emotion
69 lines (63 loc) • 1.69 kB
TypeScript
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;