Form

import { Button, ButtonGroup, Checkbox, ErrorMessage, Field, Form, FormFooter, FormHeader, FormSection, HelperMessage, Label, Select, TextArea, TextField } from '@wolf-rayet/react';

<Form>
  <FormHeader title="Add a service rep" description="They will be able to pick up conversations straight away." />
  <FormSection>
    <Field>
      <Label htmlFor="rep-name" isRequired>Full name</Label>
      <TextField id="rep-name" />
    </Field>
    <Field>
      <Label htmlFor="rep-email" isRequired>Work email</Label>
      <TextField id="rep-email" defaultValue="not-an-email" isInvalid />
      <ErrorMessage>Enter an email address, such as name@company.com.</ErrorMessage>
    </Field>
    <Field>
      <Label htmlFor="rep-queue">Default queue</Label>
      <Select id="rep-queue" options={QUEUES} placeholder="Choose a queue" />
      <HelperMessage>You can change this later.</HelperMessage>
    </Field>
    <Field>
      <Label htmlFor="rep-notes">Notes</Label>
      <TextArea id="rep-notes" rows={3} />
    </Field>
    <Field>
      <Checkbox label="Send them an invitation email" defaultChecked />
    </Field>
  </FormSection>
  <FormFooter>
    <ButtonGroup label="Form actions">
      <Button>Cancel</Button>
      <Button appearance="primary" type="submit">Add rep</Button>
    </ButtonGroup>
  </FormFooter>
</Form>