Components — Modern React UI Library

Examples

Basic Select

Renders a native select with an animated caret and placeholder option.

Basic

Role

import { Select } from "@g4rcez/components";

function BasicSelect() {
  return (
    <Select
      name="role"
      title="Role"
      placeholder="Choose a role"
      options={[
        { value: "admin", label: "Admin" },
        { value: "member", label: "Member" },
        { value: "viewer", label: "Viewer" },
      ]}
      required
    />
  );
}

With Error

Pass error to display validation feedback below the field.

With error

Country

Country is required.

import { Select } from "@g4rcez/components";

function SelectWithError() {
  return (
    <Select
      name="country"
      title="Country"
      placeholder="Select your country"
      error="Country is required."
      options={[
        { value: "br", label: "Brazil" },
        { value: "us", label: "United States" },
        { value: "de", label: "Germany" },
      ]}
      required
    />
  );
}

Disabled Select

A disabled select prevents interaction and shows the disabled cursor.

Disabled

Plan

import { Select } from "@g4rcez/components";

function DisabledSelect() {
  return (
    <Select
      name="plan"
      title="Plan"
      placeholder="Select a plan"
      disabled
      options={[
        { value: "free", label: "Free" },
        { value: "pro", label: "Pro" },
      ]}
      required
    />
  );
}

Field Sizes

Use size=normal or size=small to align selects with spacious or dense forms.

Sizes

Normal select

Small select

import { Select } from "@g4rcez/components";

function SelectSizes() {
  return (
    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
      <Select name="normal-role" size="normal" title="Normal select" placeholder="Choose a role" options={options} />
      <Select name="small-role" size="small" title="Small select" placeholder="Choose a role" options={options} />
    </div>
  );
}

When to use Select

Use when

You need the documented Select interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Select behavior you need.

Accessibility

Keep the Select labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.