Inputs

Select Native

A vanilla select component with custom styling.

import { SelectNative } from '@/components/SelectNative';
export const SelectNativeHero = () => (  <SelectNative>    <option value="0-18">18 and under</option>    <option value="19-39">19 to 39</option>    <option value="40-64">40 to 64</option>    <option value="65-infinity">65 and over</option>  </SelectNative>);

Installation

1
Install dependencies:
npm install tailwind-variants

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

Select age

import { Label } from "@/components/Label"import { SelectNative } from "@/components/SelectNative";
export const SelectNativeLabelExample = () => (  <>    <div className="mx-auto flex max-w-xs flex-col">      <Label htmlFor="age1">Select age</Label>      <SelectNative id="age1" className="mt-2">        <option value="0-18">18 and under</option>        <option value="19-39">19 to 39</option>        <option value="40-64">40 to 64</option>        <option value="65-infinity">65 and over</option>      </SelectNative>    </div>  </>);

Example: SelectNative with long options

Select model

import { Label } from "@/components/Label"import { SelectNative } from '@/components/SelectNative';
export const SelectNativeLongOptionsExample = () => (  <>    <div className="mx-auto flex max-w-xs flex-col">      <Label htmlFor="model">Select model</Label>      <SelectNative id="model" className="mt-2">        <option value="gpt-3">          GPT-3 (Generative Pre-trained Transformer 3)        </option>        <option value="bert">          BERT (Bidirectional Encoder Representations from Transformers)        </option>        <option value="t5">T5 (Text-To-Text Transfer Transformer)</option>      </SelectNative>    </div>  </>);

Example: SelectNative with error

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