Input

The Input component is a reusable and customizable input element. This atomic hv-ui component is used in the text-input component defined in the hv-common package.

Examples

Default Input

Preview

Form Label

Code

import { Input } from '@hv/ui/input';
import { Label } from '@hv/ui/label';

<div className='relative flex flex-col gap-1 px-1'>
  <div className='flex items-center gap-1'>
    <Label>Form Label</Label>
  </div>
  <Input type='text'/>
</div>

Input in Error State

Preview

Form Label

This field is required

Code

import { Input } from '@hv/ui/input';
import { Label } from '@hv/ui/label';
import { InputError } from '@hv/ui/input-error';

<div className='relative flex flex-col gap-1 px-1'>
  <div className='flex items-center gap-1'>
    <Label>Form Label</Label>
    <InputError className='mb-0'>This field is required</InputError>
  </div>
  <Input state='error' type='text'/>
</div>

Props

Name	Description	Type
className	Additional classes for styling the checkbox.	String
type	Defines the type of input	String
state	Defines the input state: default or error	String
ref	Forwarded reference to the input element.	React.Ref<HTMLInputElement>
props	Additional input properties from HTML attributes.	HTMLInputAttributes

Customization

Customizations to this component can be made directly to the source file in the UI library package or one-off styles can be passed in as className overrides.