@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
49 lines (48 loc) • 2.48 kB
TypeScript
import React from 'react';
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
import { __CloseButtonProps } from '../CloseButton';
import { ComboboxItem, ComboboxLikeProps, ComboboxLikeStylesNames } from '../Combobox';
import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
export type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<SelectFactory>, ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {
/** Controlled component value */
value?: string | null;
/** Uncontrolled component default value */
defaultValue?: string | null;
/** Called when value changes */
onChange?: (value: string | null, option: ComboboxItem) => void;
/** Determines whether the select should be searchable, `false` by default */
searchable?: boolean;
/** Determines whether check icon should be displayed near the selected option label, `true` by default */
withCheckIcon?: boolean;
/** Position of the check icon relative to the option label, `'left'` by default */
checkIconPosition?: 'left' | 'right';
/** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */
nothingFoundMessage?: React.ReactNode;
/** Controlled search value */
searchValue?: string;
/** Default search value */
defaultSearchValue?: string;
/** Called when search changes */
onSearchChange?: (value: string) => void;
/** Determines whether it should be possible to deselect value by clicking on the selected option, `true` by default */
allowDeselect?: boolean;
/** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
clearable?: boolean;
/** Props passed down to the clear button */
clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
/** Props passed down to the hidden input */
hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
}
export type SelectFactory = Factory<{
props: SelectProps;
ref: HTMLInputElement;
stylesNames: SelectStylesNames;
variant: InputVariant;
}>;
export declare const Select: import("../../core").MantineComponent<{
props: SelectProps;
ref: HTMLInputElement;
stylesNames: SelectStylesNames;
variant: InputVariant;
}>;