Center

Center is a layout component that centers its child within itself.

    View Source@chakra-ui/layout

Props#

Full List of React-Select Props: https://react-select.com/props

Internal Components#

interface SelectComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
    ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
    Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
    DropdownIndicator: ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>> | null;
    Group: ComponentType<GroupProps<Option, IsMulti, Group>>;
    GroupHeading: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;
    IndicatorsContainer: ComponentType<IndicatorsContainerProps<Option, IsMulti, Group>>;
    IndicatorSeparator: ComponentType<IndicatorSeparatorProps<Option, IsMulti, Group>> | null;
    Input: ComponentType<InputProps<Option, IsMulti, Group>>;
    LoadingIndicator: ComponentType<LoadingIndicatorProps<Option, IsMulti, Group>>;
    Menu: ComponentType<MenuProps<Option, IsMulti, Group>>;
    MenuList: ComponentType<MenuListProps<Option, IsMulti, Group>>;
    LoadingMessage: ComponentType<NoticeProps<Option, IsMulti, Group>>;
    NoOptionsMessage: ComponentType<NoticeProps<Option, IsMulti, Group>>;
    MultiValue: ComponentType<MultiValueProps<Option, IsMulti, Group>>;
    MultiValueContainer: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
    MultiValueLabel: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
    MultiValueRemove: ComponentType<MultiValueRemoveProps<Option, IsMulti, Group>>;
    Option: ComponentType<OptionProps<Option, IsMulti, Group>>;
    Placeholder: ComponentType<PlaceholderProps<Option, IsMulti, Group>>;
    SelectContainer: ComponentType<ContainerProps<Option, IsMulti, Group>>;
    SingleValue: ComponentType<SingleValueProps<Option, IsMulti, Group>>;
    ValueContainer: ComponentType<ValueContainerProps<Option, IsMulti, Group>>;
}

Style keys#

  • clearIndicator - Box (uses theme styles for Chakra's CloseButton)
  • container - Box
  • control - Box (uses theme styles for Chakra's Input)
  • dropdownIndicator - Box (uses theme styles for Chrakra's InputRightAddon)
  • group - Box
  • groupHeading - Box (uses theme styles for Chakra's Menu group title)
  • indicatorsContainer - Box
  • indicatorSeparator - Divider
  • input - chakra.input (wrapped in a Box)
  • inputContainer - Box
  • loadingIndicator - Spinner
  • loadingMessage - Box
  • menu - Box
  • menuList - Box (uses theme styles for Chakra's Menu)
  • multiValue - chakra.span (uses theme styles for Chakra's Tag)
  • multiValueLabel - chakra.span (uses theme styles for Chakra's TagLabel)
  • multiValueRemove - Box (uses theme styles for Chakra's TagCloseButton)
  • noOptionsMessage - Box
  • option - Box (uses theme styles for Chakra's MenuItem)
  • placeholder - Box
  • singleValue - Box
  • valueContainer - Box

TypeScript#

Detailed TypeScript for react-select

import { GroupBase, OptionBase, Select } from "chakra-react-select";


/**
 * `OptionBase` is a custom type exported by this package meant to be extended
 * to make your custom option types. It includes all of the keys that can be
 * used by this package to customize the styles of your selected options
 *
 * ```
 * type OptionBase = {
 *   variant?: string;
 *   colorScheme?: string;
 *   isFixed?: boolean;
 *   isDisabled?: boolean;
 * };
 * ```
 */
interface ColorOption extends OptionBase {
  label: string;
  value: string;
}


const colorOptions = [
  {
    label: "Red",
    value: "red",
    colorScheme: "red", // This is allowed because of the key in the `OptionBase` type
  },
  {
    label: "Blue",
    value: "blue",
  }
]


function CustomMultiSelect() {
  return {
    <ChakraReactSelect<ColorOption, true, GroupBase<ColorOption>>
      isMulti
      name="colors"
      options={colorOptions}
      placeholder="Pick a color!"
    />
  }
}

  • This will make the custom prop available both when using the Select component as well as when accessing selectProps when customizing components.

  • You can use module augmentation to add custom props to the Select prop types

declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
  > {
    myCustomProp: string;
  }
}
type OptionType = { [string]: any }
type OptionsType = Array<OptionType>


type GroupType = {
  [string]: any, // group label
  options: OptionsType,
}


type ValueType = OptionType | OptionsType | null | void


type CommonProps = {
  clearValue: () => void,
  getStyles: (string, any) => {},
  getValue: () => ValueType,
  hasValue: boolean,
  isMulti: boolean,
  options: OptionsType,
  selectOption: OptionType => void,
  selectProps: any,
  setValue: (ValueType, ActionTypes) => void,
  emotion: any,
}

Extra Props#

  • size
  • colorScheme
  • tagVariant
  • isInvalid / isReadOnly
  • focusBorderColor / errorBorderColor
  • useBasicStyles
  • selectedOptionStyle
  • selectedOptionColorScheme
  • variant

size — Options: ResponsiveValue<"sm" | "md" | "lg"> — Default: md#

You can pass the size prop with either sm, md, or lg (default is md). These will reflect the sizes available on the Chakra <Input /> component (except for xs because it's too small to work). Alternatively, you can pass a responsive style array or object of size values to allow it to change depending on your theme's breakpoints.

If no size is passed, it will default to defaultProps.size from the theme for Chakra's Input component. If your component theme for Input is not modified, it will be md.

return (
  <>
    <Select size="sm" />
    <Select size="md" /> {/* Default */}
    <Select size="lg" />
  </>
);

![CS-JS]