Select

Select is a component used for allowing a user to choose one option from a list.

Theming

The Select is a multi part component.

Select inherits the style from NativeSelect and Menu.

If you want to change the style of the component, please check here.

export const Select: ComponentMultiStyle<"Select"> = mergeMultiStyle(
  NativeSelect,
  Menu,
  {
    baseStyle: {
      content: {
        w: "100%",
      },
      footer: {},
      header: {},
      inner: {},
      item: {
        _active: {
          bg: ["blackAlpha.200", "whiteAlpha.200"],
        },
        _hover: {
          bg: ["blackAlpha.100", "whiteAlpha.100"],
          _disabled: {
            bg: ["white", "black"],
          },
          _focus: {
            bg: ["blackAlpha.50", "whiteAlpha.50"],
          },
        },
      },
      itemIcon: {},
      list: {
        maxH: "xs",
        overflowY: "auto",
      },
    },
  },
)({ omit: ["button", "command"] })

Copied!

Edit this page on GitHub

PreviousToggle NextMultiSelect