-
-
Notifications
You must be signed in to change notification settings - Fork 932
/
FormField.tsx
41 lines (40 loc) · 1.23 KB
/
FormField.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { PropsWithChildren } from 'react';
/**
* @description
* A wrapper around form fields which provides a label, tooltip and error message.
*
* @example
* ```ts
* import { FormField } from '@vendure/admin-ui/react';
*
* export function MyReactComponent() {
* return (
* <FormField label="My field" tooltip="This is a tooltip" invalid errorMessage="This field is invalid">
* <input type="text" />
* </FormField>
* );
* }
* ```
*
* @docsCategory react-components
*/
export function FormField(
props: PropsWithChildren<{
for?: string;
label?: string;
tooltip?: string;
invalid?: boolean;
errorMessage?: string;
}>,
) {
return (
<div
className={`form-group ` + (!props.label ? 'no-label' : '') + (props.invalid ? 'clr-error' : '')}
>
{props.label && <label htmlFor={props.for ?? ''}>{props.label}</label>}
{props.tooltip && <div className="tooltip-text">{props.tooltip}</div>}
<div className={`input-row ` + (props.invalid ? 'invalid' : '')}>{props.children}</div>
{props.errorMessage && <div className="error-message">{props.errorMessage}</div>}
</div>
);
}