#Overview
The @segments/form package offers form components that can be used together with React Hook Form.
For ease of use the library gets re-exported from the same package.
Read their documentation carefully before continuing on with your form implementation.
All form components work in combination with the form, name and options properties
instead of using the register method.
Show codeHide code
export const FormDemo = () => {
interface FormValues {
name: string;
email: string;
feedback: string;
agreeToTerms: boolean;
}
const form = useForm<FormValues>();
return (
<form onSubmit={form.handleSubmit(() => {})}>
<Heading tag="h3">Feedback</Heading>
<TextField
label="Name"
form={form}
name="name"
options={{
required: { value: true, message: "Value is required" },
}}
/>
<TextField
label="Email"
form={form}
name="email"
options={{
required: { value: true, message: "Value is required" },
pattern: {
value: /^.+@.+\.\w{2,4}$/i,
message: "Enter a valid email address",
},
}}
/>
<MultiLineTextField
label="Feedback"
form={form}
name="feedback"
rows={4}
options={{
required: { value: true, message: "Value is required" },
maxLength: {
value: 300,
message: "Please provide no more than 300 characters",
},
}}
/>
<SingleCheckboxField
form={form}
name="agreeToTerms"
options={{
required: {
value: true,
message: "Please accept the terms and conditions to continue",
},
}}
>
I agree to the terms and conditions
</SingleCheckboxField>
<Button type="submit">Submit</Button>
</form>
);
};
#Form Components
The following components are fully supported to be used with React Hook Form.
- Checkbox (Code)
- Dropdown (Code)
- Input Field (Code)
- Radio Button (Code)
- Selector (Code)
- Toggle Switch (Code)
#Additional Components
When using Selectors, Radio Buttons or multiple Checkboxes they have to be used with
- Fieldset
- Fieldset Legend
- Field Help Text
The <Fieldset /> groups several related form controls to make them accessible.
A <FieldsetLegend /> adds a heading to the group inside of the <Fieldset />.
The <FieldHelpText /> displays a validation message and help text related to the controls grouped by the <Fieldset />.
Show codeHide code
export const RadioButtonFieldDemo = () => {
const form = useForm<{ option: string }>();
const options = {
required: { value: true, message: "Please choose one option" },
};
return (
<form onSubmit={form.handleSubmit(() => {})}>
<Fieldset>
<FieldsetLegend>Please choose an option</FieldsetLegend>
{items.map((item) => (
<RadioButtonField
key={item.value}
form={form}
name="option"
defaultChecked={item.value === "option2"}
value={item.value}
options={options}
>
{item.label}
</RadioButtonField>
))}
<FieldHelpText form={form} name="option" />
</Fieldset>
<Button type="submit">Submit</Button>
</form>
);
};
#Conditional Fields
Form fields can be added or removed based on the value of another field.
Show codeHide code
export const ConditionalFormDemo: FunctionComponent = () => {
interface FormValues {
isChecked: boolean;
input: string;
}
const form = useForm<FormValues>();
const [, setSubmittedData] = useState<FormValues>();
const onSubmit: SubmitHandler<FormValues> = (data) => setSubmittedData(data);
const isChecked = form.watch("isChecked");
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={form.handleSubmit(onSubmit)}>
<SingleCheckboxField form={form} name="isChecked">
Checkbox
</SingleCheckboxField>
{/* a conditional field which is only rendered when "isChecked" is true */}
{isChecked && <TextField form={form} name="input" label="A Value" />}
<Button type="submit">Submit</Button>
</form>
);
};