React Select Component

Country

Used for billing.

Disabled

Installation

pnpm add krz-ui

Usage

import { Select } from "krz-ui";

<Select
  label="Country"
  placeholder="Choose a country"
  options={[
    { value: "ae", label: "United Arab Emirates" },
    { value: "in", label: "India" },
  ]}
  onValueChange={setCountry}
/>

API Reference

Prop	Type	Description
`options`	`SelectOption[]`	Options with value, label and disabled.
`value / defaultValue`	`string`	Controlled or initial value.
`placeholder`	`string`	Shown when nothing is selected.
`label / hint / error`	`ReactNode`	Field label, helper text and error message.
`onValueChange`	`(value: string) => void`	Called with the selected value.
`size`	`"sm" \| "md" \| "lg"`	Field size.
`leftIcon`	`ReactNode`	Icon inside the field.
`name / required / disabled`	`string / boolean`	Form name (hidden input), required and disabled state.
`className / style / ref`	`—`	className and style go on the whole field; ref and native attributes go to the trigger button. See Customization.
`classNames`	`{ label?, control?, icon?, message?, trigger?, value?, list?, option? }`	Extra classes for inner parts.