Input

The Input component is used to handle user input, along with providing options for styling via Variants, Themes, and Sizes. Also provides options for adding icons, captions, and error text for the field.

Usage

import { Input } from '@harnessio/ui/components'

//...

return (
  <Input
    variant={"extended"}
    size={"md"}
    value={"input with value"}
    theme={"danger"}
    caption={"dummy caption"}
    inputIconName={"plus"}
    rightElement={<Button>Right element</Button>}
  />
)

API Reference

Prop	Required	Default	Type
variant	true	default	default | extended
size	true	sm	sm | md
theme	true	default	default | danger
label	true		string
caption	true		ReactNode
error	true		string
optional	true		boolean
className	true		string
wrapperClassName	true		string
inputIconName	true		IconProps['name']
rightElement	true		ReactNode