FormField

Wraps any control with a label, hint and error message. When the field has a single child and no htmlFor, the label is wired to it automatically. Setting error also puts the child control into its error state.

import { FormField, TextInput } from '@gg-software/ui';
 
<FormField label="Email" hint="We never share it." required>
    <TextInput type="email" placeholder="you@example.com" />
</FormField>
 
<FormField label="Username" error="This username is taken.">
    <TextInput defaultValue="admin" />
</FormField>

Note: Select, DatePicker and other picker components already include their own label / hint / error chrome — FormField is for wrapping bare inputs.

Props