FieldMessage

Helper, error, success or warning message displayed below form fields.

Also known as: helper text, error message, validation message, hint text, form feedback

View in Storybook

When to use

• Showing validation messages, hints, or errors below form fields.
• Pair with Input/Select/Textarea variant="error" for consistent error UX.

Import

import { FieldMessage } from '@vacano/ui'

Usage

<FieldMessage>This is a helper message</FieldMessage>

Variants

<FieldMessage variant="normal">This field is optional</FieldMessage>
<FieldMessage variant="error">This field is required</FieldMessage>
<FieldMessage variant="success">Email is available</FieldMessage>
<FieldMessage variant="warning">Password is weak</FieldMessage>

With Input

const [value, setValue] = useState('')
const hasError = value.length > 0 && value.length < 3

<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
  <Input
    label="Username"
    value={value}
    onChange={(e) => setValue(e.target.value)}
    variant={hasError ? 'error' : 'normal'}
  />
  {hasError && (
    <FieldMessage variant="error">
      Username must be at least 3 characters
    </FieldMessage>
  )}
</div>

With Select

<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
  <Select label="Country" value={value} onChange={setValue} options={options} />
  <FieldMessage variant="normal">
    Select your country of residence
  </FieldMessage>
</div>

Props

Prop	Type	Default	Description
children	ReactNode	-	Message content
variant	'normal' | 'error' | 'success' | 'warning'	'normal'	Visual variant
className	string	-	CSS class name

Related

• FieldLabel - Form field label
• Input - Text input with validation variants