Select | Pol-ui - A beautiful and functional UI library for React and Next.js

A Select component is a key component in a form, it allows the user to select one or more options from a list of options.

Importation

Import the component from pol-ui to use the Rating element:

import { Rating } from "pol-ui";

Default Rating

import { Select } from "pol-ui";
 
export const SelectComponent = (): JSX.Element => {
  return (
    <Select id="countries">
      <option>United States</option>
      <option>Canada</option>
      <option>France</option>
      <option>Germany</option>
    </Select>
  );
};

Props

Prop name	Type	Default	Description
addon	ReactNode	-	Addon to the input
color	Colors	primary	The color of the input
helperText	ReactNode	-	Helper text to show below the input
icon	FC<ComponentProps<'svg'>>	-	Icon to show inside the input
shadow	boolean	false	If the input should have a shadow
sizing	MainSizes	md	The size of the input
theme	SelectTheme	-	The theme of the input

💡

You can also provide any prop comming from the HTML select tag.

Examples

Select with Icon

To add an icon to the Rating component, you can use the icon prop.

Custom star amount Rating

import { Select } from "pol-ui";
import { TbFlag } from "react-icons/tb";
 
export const SelectComponent = (): JSX.Element => {
  return (
    <Select id="countries" icons={TbFlag}>
      <option>United States</option>
      <option>Canada</option>
      <option>France</option>
      <option>Germany</option>
    </Select>
  );
};

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface RatingTheme {
  root: { base: string };
  field: {
    base: string;
    input: {
      base: string;
      sizes: MainSizesType;
    };
  };
}