Input & Select Customization

Learn how to pass custom CSS styles and capture event handlers on core form inputs and select elements.

Preview & Interactive Laboratory

Developer Sandbox & Event Console

Verify custom CSS overrides and real-time JavaScript callbacks

Custom CSS Class ConfigurationLive Style Edit

Modify the Tailwind classes above to instantly redesign the live elements below.

Live Preview (Interact with these fields)

Customized Input

Customized Select Trigger

live_event_stream.sh

Live Recording

System: Event listener initialized. Trigger events below to see real-time callbacks...

Variants Grid

Default Input

Outline Input

Secondary Input

States & Icons

Usage & Implementation

// Example showing custom CSS classes and event handlers passed to Input & Select components:

<Input 
  className="bg-violet-50 border-violet-300 text-violet-900"
  onChange={(e) => handleInputChange(e)}
  onFocus={() => handleFocus()}
  onBlur={() => handleBlur()}
/>

<Select onValueChange={(val) => handleSelectChange(val)}>
  <SelectTrigger className="bg-amber-50 border-amber-300 text-amber-900">
    <SelectValue placeholder="Select Option" />
  </SelectTrigger>
  ...
</Select>

React / Tailwind

Granular Customization

className Prop

Injects custom Tailwind or pure CSS styles directly to overwrite standard layouts.

className={`className='border-red-500 bg-red-50'`}

Event Props

Pass standard DOM listeners like onChange, onFocus, onBlur, or Radix-level onValueChange.

className={`onChange={(e) => ...}`}

API Reference (Props)

Prop	Type	Default	Description
className	string	undefined	Custom classes to merge onto the element container.
onChange	React.ChangeEventHandler<HTMLInputElement>	undefined	Fires when user inputs characters into the field.
onFocus	React.FocusEventHandler<HTMLInputElement>	undefined	Fires when the element gains active layout focus.
onBlur	React.FocusEventHandler<HTMLInputElement>	undefined	Fires when the element loses layout focus.