Select

Allows users to select one or more values from a list.

Theming

The Select component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy

  • addon
  • field
  • element

Default theme

import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
import { Input } from '@chakra-ui/theme/components'
import { selectAnatomy } from '@saas-ui/theme/anatomy'


const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
  selectAnatomy.keys
)


export const selectTheme = defineMultiStyleConfig({
  defaultProps: Input.defaultProps,
  baseStyle: Input.baseStyle,
  sizes: Input.sizes,
  variants: Input.variants,
})

Customizing the theme

The Select component uses the SuiSelect key within the theme's components.

const theme = extendTheme({
  components: {
    SuiSelect: {
      baseStyle: {
        field: {
          bg: 'red.200',
        },
      },
    },
  },
})

Was this helpful?