NativeSelect

NativeSelect is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).

Source @yamada-ui/native-select

Theming

The NativeSelect is a multi part component.

NativeSelect inherits the style from Input.

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

export const NativeSelect: ComponentMultiStyle<"NativeSelect"> =
  mergeMultiStyle(Input, {
    baseStyle: {
      container: {},
      field: {
        "& > option, optgroup": {
          bg: ["white", "black"],
        },
        cursor: "pointer",
        pb: "px",
        pr: "8",
        _focus: {
          zIndex: "unset",
        },
        _readOnly: {
          pointerEvents: "none",
        },
      },
      icon: {
        color: ["blackAlpha.600", "whiteAlpha.700"],
        outline: 0,
        py: "2",
        rounded: "md",
        w: "6",
        _disabled: {
          opacity: 0.4,
        },
      },
    },

    sizes: {
      xs: {
        icon: {
          fontSize: "lg",
          insetEnd: "1",
          pt: "2",
        },
      },
      sm: {
        icon: {
          fontSize: "xl",
          insetEnd: "1.5",
        },
      },
      md: {
        icon: {
          fontSize: "xl",
          insetEnd: "2",
        },
      },
      lg: {
        icon: {
          fontSize: "2xl",
          insetEnd: "2",
        },
      },
      xl: {
        icon: {
          fontSize: "3xl",
          insetEnd: "3",
        },
      },
    },
  })({ omit: ["addon", "element"] })

Copied!

Edit this page on GitHub

PreviousMultiSelect NextAutocomplete