Kleri UI / Components / Input

Input

Form controls, switches, text inputs, and drag-and-drop upload.

KleriSwitch

Accessible toggle switch with animated thumb and gradient checked state.

Usage 
<KleriSwitch
  value={false}
  disabled={false}
  ariaLabel="Toggle switch"
/>

Props

Checked

false

Disabled

false

KleriInput

Text input with label, error states, password visibility toggle, and shake animation.

Usage 
<KleriInput
  value=""
  label="Email"
  placeholder="Enter your email"
  type="text"
  required={false}
  withBorder={true}
  shake={false}
  errors={[]}
/>

Props

Required

false

With Border

true

Shake

false

KleriToggleGroup

Accessible toggle group with multiple variants, sizes, and orientations. Compose with KleriToggleGroupItem for individual toggles.

Usage 
<KleriToggleGroup
  variant="default"
  size="default"
  orientation="horizontal"
  value="bold"
/>

Props

KleriSlider

Accessible range slider with gradient track, animated thumb, label, value display, and error shake animation.

Usage 
<KleriSlider
  label="Brightness"
  showValue={true}
  min={0}
  max={100}
  step={1}
  shake={false}
  value={50}
/>

Props

Show Value

true

Shake

false

KleriDragNDrop

Drag-and-drop file upload dropzone with image preview and click-to-browse support — ideal for Tauri desktop apps with native file handling.

Drop your files here

Drag and Drop Your file here

Supports image and PDF files

File(s) -  

None

Usage 
<KleriDragNDrop
  label="Drop your files here"
  mainText="Drag and Drop Your file here"
  subText=""
/>

Props