Usage
import { FormField, TextInput } from '@loomhq/lens'
<FormField
label="Name"
labelFor="name"
errorMessage="Some error message"
>
<TextInput id="name" />
</FormField>
Direction
Use direction="row" for Checkbox, Radio, and Switch.
<form>
<FormField
direction="column"
label="Column example"
labelFor="columnExampleTextInput"
>
<TextInput id="columnExampleTextInput" />
</FormField>
<Spacer bottom="medium" />
<FormField
direction="row"
label="Row example"
labelFor="rowExampleCheckbox"
>
<Checkbox id="rowExampleCheckbox" />
</FormField>
<Spacer bottom="medium" />
<FormField
direction="row"
label="Row example"
labelFor="rowExampleRadio"
>
<Radio id="rowExampleRadio" />
</FormField>
<Spacer bottom="medium" />
<FormField
direction="row"
label="Row example"
labelFor="rowExampleSwitch"
>
<Switch id="rowExampleSwitch" />
</FormField>
</form>
With error
<form>
<FormField
label="Error example"
labelFor="errorExample"
errorMessage="Some error message"
>
<TextInput id="errorExample" hasError />
</FormField>
</form>
Examples
<form>
<FormField
label="Name"
labelFor="name"
>
<TextInput id="name" />
</FormField>
<Spacer bottom="medium" />
<FormField label="Country" labelFor="country">
<Select
placeholder="Choose an option"
options={[
{ value: 'australia', title: 'Australia' },
{ value: 'austria', title: 'Austria' },
]}
/>
</FormField>
<Spacer bottom="medium" />
<FormField label="Comment" labelFor="comment">
<Textarea id="comment" />
</FormField>
<Spacer bottom="medium" />
<FormField
direction="row"
label="Accept terms"
labelFor="terms"
>
<Checkbox id="terms" />
</FormField>
</form>
Props
direction
'row' | 'column'
'column'
errorMessage
string | null