Native Select

Quick start

Here's a quick start guide to get started with the nativeSelect component

Importing Component

import { NativeSelect } from "@hover-design/react";

Code Snippets and Examples

NativeSelect Default

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <NativeSelect options={options} />
</div>;

FirstSecondThirdFourth

NativeSelect Controlled

const [value, setValue] = useState("first");

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second" },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <NativeSelect
    value={value}
    onChange={(event) => {
      setValue(event.target.value);
    }}
    options={options}
  />
</div>;

FirstSecondThirdFourth

NativeSelect Error

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second" },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <NativeSelect error="This is an error" options={options} />
</div>;

Note: error can also be passed as a boolean.

FirstSecondThirdFourth

This is an error

NativeSelect Rounded

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second" },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <NativeSelect borderRadius={"60px"} options={options} />
</div>;

FirstSecondThirdFourth

Props Reference

Attributes	Values	Default Value	Optional ?
options	Array of { label:string , value:string | number }		No
height	string	fit-content	Yes
width	string	fit-content	Yes
borderRadius	string	0	Yes
error	string | boolean	false	Yes

NativeSelect extends the props of select tag https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select