Input Error

The InputError component provides feedback to users when form inputs are invalid. It is attributed with role='alert' to communicate the importance of the feedback to the user.

Examples

Stand-alone

Preview

This field is required

Code

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

<InputError>This field is required</InputError>

With Input

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>

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 directly.

To customize its placement in relation to form inputs, customize the source files for those inputs or use the atomic form components directly.