blue
View on GitHub

Form Help Msg

A form help message displays supporting text below a form field, such as hints, validation errors, or additional context.

Usage

Light
Blue
Zoho Puvi
We will never share your email. 
<script>
	import { FormLabel, TextInput, FormHelpMsg } from 'deskblocks';
</script>

<div>
	<FormLabel for="email">Email</FormLabel>
	<TextInput id="email" placeholder="[email protected]" />
	<FormHelpMsg>We will never share your email.</FormHelpMsg>
</div>

Invalid state

Pass the invalid prop to render the message in the danger color, typically alongside an invalid input.

Light
Blue
Zoho Puvi
Enter a valid email address. 
<div>
	<FormLabel for="email2">Email</FormLabel>
	<TextInput id="email2" invalid value="not-an-email" />
	<FormHelpMsg invalid>Enter a valid email address.</FormHelpMsg>
</div>

Disabled state

Light
Blue
Zoho Puvi
This field is currently unavailable. 
<FormHelpMsg disabled>This field is currently unavailable.</FormHelpMsg>

Slots

Props

invalid boolean false Renders the message in the danger color.
disabled boolean false Renders the message in the disabled color.