Select Native

A vanilla select component with custom styling.


  1. 1

    Install dependencies:

    npm install tailwind-variants
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Raw SelectNative [v0.0.0]
    import React from "react"import { tv, type VariantProps } from "tailwind-variants"
    import { cx, focusInput, hasErrorInput } from "@/lib/utils"
    const selectNativeStyles = tv({  base: [    // base    "peer w-full cursor-pointer appearance-none truncate rounded-md border py-2 pl-3 pr-7 shadow-sm outline-none transition-all sm:text-sm",    // background color    "bg-white dark:bg-gray-950 ",    // border color    "border-gray-300 dark:border-gray-800",    // text color    "text-gray-900 dark:text-gray-50",    // placeholder color    "placeholder-gray-400 dark:placeholder-gray-500",    // hover    "hover:bg-gray-50 hover:dark:bg-gray-950/50",    // disabled    "disabled:pointer-events-none",    "disabled:bg-gray-100 disabled:text-gray-400",    "disabled:dark:border-gray-700 disabled:dark:bg-gray-800 disabled:dark:text-gray-500",    // focus    focusInput,    // invalid (optional)    // "aria-[invalid=true]:dark:ring-red-400/20 aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-red-200 aria-[invalid=true]:border-red-500 invalid:ring-2 invalid:ring-red-200 invalid:border-red-500"  ],  variants: {    hasError: {      true: hasErrorInput,    },  },})
    interface SelectNativeProps  extends React.InputHTMLAttributes<HTMLSelectElement>,    VariantProps<typeof selectNativeStyles> {}
    const SelectNative = React.forwardRef<HTMLSelectElement, SelectNativeProps>(  ({ className, hasError, ...props }: SelectNativeProps, forwardedRef) => {    return (      <select        ref={forwardedRef}        className={cx(selectNativeStyles({ hasError }), className)}        {...props}      />    )  },)
    SelectNative.displayName = "SelectNative"
    export { SelectNative, selectNativeStyles, type SelectNativeProps };

Example: SelectNative with label

Example: SelectNative with long options

Example: SelectNative with error

To style the SelectNative for an error state, use the hasError prop.

API Reference: SelectNative

This component is based on the select element and supports all of its props.

Style for erroneous input.

Default: false