Select

Below is the full output of the Select component across all variants and sizes.

“Its Important to install the packages & Dependencies to use can intall using npm install zure-ui and also paste code maunally For both React & Next Js “

1. Variants

These define the intent and visual weight of the Select.

Preview

Country

2. Sizes

Selects can be scaled to fit different UI densities.

Preview

3. Example

Made an example for better understanding in which you an select Country

Important Note “I have used tailwindcss you can use normal CSS for text color”

Preview

Selected:

Country

Props

Prop	Type	Default	Description
`label`	`string`	`undefined`	Label text displayed above the select input.
`value`	`string \| number`	`undefined`	Currently selected value.
`onChange`	`(value: string \| number) => void`	`undefined`	Callback function triggered when the selected value changes.
`options`	`Array<{ label: string, value: string \| number }>`	`[]`	Array of options for the dropdown. Each option should have `label` and `value`.
`placeholder`	`string`	`" "`	Placeholder text shown when no value is selected.
`variant`	`'default' \| 'outlined' \| 'filled'`	`"default"`	Visual style of the select input.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Size of the select input.
`color`	`string`	`"#000"`	Text color or main color for the select input.
`error`	`boolean`	`false`	Displays the select in an error state if `true`.
`disabled`	`boolean`	`false`	Disables the select input if `true`.
`className`	`string`	`""`	Custom CSS classes for additional styling.
`...props`	`React.SelectHTMLAttributes<HTMLSelectElement>`	`-`	Additional props passed to the `<select>` element.

Installation

You can Integrate Zure UI By 2 ways npm install zure-ui Or by Manually creating folder , files & paste the given code It Totally depends on your workflow.

NPM

Step 1: Create a React App

Open your terminal and run the following command to create a new React app:


npx create-react-app my-app

Step 2: Navigate to Your Project Directory

After creating your project, navigate to your project directory:


cd my-app

Step 3: Install the Package

Run the following command in your project root to add the library as a dependency.


npm install zure-ui

Step 4: Start Building

You can now import any component directly into your React files.

Select.jsx


import { Select } from 'zure-ui';
 
function App() {
  return 
    <Select 
label="Country" 
options={[{ label: "India", value: "in" },{ label: "USA", value: "us" },]} 
color="#000" 
variant="primary">Primary</Select>
  
}

Manual

Step 1: Create a Components Directory

Ensure you have a dedicated folder for UI components (e.g., src/components/ui).

Step 2: Create the Component Folder

For each component you want to use, create a new folder named after the component.

- - - - Select.jsx
      - Select.module.css
      - index.js
- App.js

Step 3: Add the Three Core Files

Inside that new folder, create these three files and paste the code provided in the component’s documentation:

Select.jsx (The Logic)
Select.module.css (The Styles)
index.js (The Export)

Step 4: Paste in Select.jsx

React JS

Select.jsx


import styles from "./select.module.css";
 
export const Select = ({
  label,
  value,
  onChange,
  options = [],
  placeholder = " ",
  variant = "default",
  size = "md",
  color = "#000",
  error = false,
  disabled = false,
  className = "",
  ...props
}) => {
  return (
    <div
      className={`${styles.wrapper} ${className}`}
      style={{ "--zure-color": error ? "red" : color }}
    >
      <select
        className={`${styles.select} ${styles[variant]} ${styles[size]}`}
        value={value}
        onChange={onChange}
        disabled={disabled}
        aria-invalid={error}
        {...props}
      >
        {/* Placeholder option */}
        <option value="" disabled hidden>
          {placeholder}
        </option>
 
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
 
      {label && <label className={styles.label}>{label}</label>}
    </div>
  );
};

Step 5: Paste in Select.module.css

Select.module.css


.wrapper {
position: relative;
width: 100%;
--zure-color: #000;
}
 
/* Base select */
.select {
width: 100%;
appearance: none;
border-radius: 8px;
border: 1.5px solid #d1d5db;
padding: 0.6rem 2.2rem 0.6rem 0.8rem;
font-size: 0.9rem;
background: white;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
 
/* Dropdown arrow */
.select {
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px;
}
 
/* Focus */
.select:focus {
border-color: var(--zure-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--zure-color) 20%, transparent);
}
 
.select option {
color: #111;
background-color: white;
}
 
 
/* Floating label */
.label {
position: absolute;
left: 0.7rem;
top: 0.7rem;
background: white;
padding: 0 0.25rem;
font-size: 0.75rem;
color: #6b7280;
pointer-events: none;
transition: 0.2s ease;
}
 
/* Float label when value selected */
.select:focus + .label,
.select:not([value=""]) + .label {
top: -0.45rem;
font-size: 0.7rem;
color: var(--zure-color);
}
 
/* Variants */
.default {
background: white;
}
 
.outline {
background: transparent;
border: 1.5px solid var(--zure-color);
}
 
.ghost {
background: transparent;
border: none;
border-bottom: 1.5px solid var(--zure-color);
border-radius: 0;
}
 
/* Sizes */
.sm {
font-size: 0.8rem;
padding: 0.4rem 2rem 0.4rem 0.6rem;
}
 
.md {
font-size: 0.9rem;
}
 
.lg {
font-size: 1rem;
padding: 0.8rem 2.4rem 0.8rem 1rem;
}
 
/* Disabled */
.select:disabled {
opacity: 0.6;
cursor: not-allowed;
}

Step 6: Paste in index.js

index.js


export { Select } from "./Select";

Step 7: Local Usage

Import the component using your local path:

Select.jsx


import { Select } from './components/Select';

Step 8: Usage

Use the component

Select.jsx


  <Select 
label="Country" 
options={[{ label: "India", value: "in" },{ label: "USA", value: "us" },]} 
color="#000" 
variant="primary">Primary</Select>
 
<Select 
label="Country" 
options={[{ label: "India", value: "in" },{ label: "USA", value: "us" },]} 
color="#000" 
variant="outline">Outline</Select>
 
<Select 
label="Country" 
options={[{ label: "India", value: "in" },{ label: "USA", value: "us" },]} 
color="#000" 
variant="ghost">Ghost</Select>
 
<Select 
label="Country" 
color="black" 
variant="primary" 
disabled>Disabled</Select>

Select

1. Variants

Preview

Use

2. Sizes

Preview

Use

3. Example

Preview

Use

Props

Installation

NPM

NPM

Step 1: Create a React App

Step 2: Navigate to Your Project Directory

Step 3: Install the Package

Step 4: Start Building

Manual

Manual

Step 1: Create a Components Directory

Step 2: Create the Component Folder

Step 3: Add the Three Core Files

Step 4: Paste in Select.jsx

React JS

Next JS

Step 5: Paste in Select.module.css

Step 6: Paste in index.js

Step 7: Local Usage

Step 8: Usage