Select Field

View source Report an issue

Related components

Select

SelectField renders a native Select (the browser's own dropdown) with a Label, an optional description and prompt, and an error message.

For most choices, use Select Menu Field. Use SelectField for very long lists, or where the phone's native picker matters.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <SelectField
      name="localAuthority"
      label="Local authority"
      placeholder="Select a local authority"
      appearance="modern"
      className="w-80"
    >
      <option value="barnet">Barnet</option>
      <option value="camden">Camden</option>
      <option value="hackney">Hackney</option>
      <option value="islington">Islington</option>
    </SelectField>
  </Form>
</div>

Appearance

standard (default) has a white background and a grey-700 border. modern has a filled background and no border.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <SelectField label="Local authority" placeholder="Select a local authority" name="standard" appearance="standard">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
      <SelectField label="Local authority" placeholder="Select a local authority" name="modern" appearance="modern">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
    </div>
  </Form>
</div>

Theme

With appearance="modern", use theme="grey" on white surfaces and theme="white" on grey surfaces.

<Form onSubmit={() => {}}>
  <div className="flex flex-col gap-4">
    <div className="w-80 rounded-md border border-grey-200 bg-white p-6">
      <SelectField label="Local authority" placeholder="Select a local authority" name="grey" appearance="modern" theme="grey">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
    </div>
    <div className="w-80 rounded-md bg-grey-100 p-6">
      <SelectField label="Local authority" placeholder="Select a local authority" name="white" appearance="modern" theme="white">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
    </div>
  </div>
</Form>

Size

sm, md (default) and lg.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <SelectField placeholder="Select a local authority" name="sm" size="sm" appearance="modern" label="Size sm">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
      <SelectField placeholder="Select a local authority" name="md" size="md" appearance="modern" label="Size md">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
      <SelectField placeholder="Select a local authority" name="lg" size="lg" appearance="modern" label="Size lg">
        <option value="barnet">Barnet</option>
        <option value="camden">Camden</option>
        <option value="hackney">Hackney</option>
        <option value="islington">Islington</option>
      </SelectField>
    </div>
  </Form>
</div>

States

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}} appearance="modern">
    <div className="flex w-80 flex-col gap-6">
      <SelectField name="placeholder" label="Placeholder" placeholder="Select a local authority">
        <option value="camden">Camden</option>
      </SelectField>
      <SelectField name="filled" label="Filled" defaultValue="camden">
        <option value="camden">Camden</option>
      </SelectField>
      <SelectField name="disabled" label="Disabled" defaultValue="camden" disabled>
        <option value="camden">Camden</option>
      </SelectField>
    </div>
  </Form>
</div>

Error

const ShowErrors = ({ trigger }) => {
  React.useEffect(() => {
    trigger()
  }, [trigger])
  return null
}

render(
  <Form onSubmit={() => {}}>
    {({ trigger }) => (
      <div className="flex w-96 flex-col gap-6 rounded-md bg-white p-8">
        <SelectField
          name="standard"
          label="Local authority (standard)"
          placeholder="Select a local authority"
          validation={{ required: 'Select the school’s local authority' }}
        >
          <option value="camden">Camden</option>
        </SelectField>
        <SelectField
          name="modern"
          label="Local authority (modern)"
          placeholder="Select a local authority"
          appearance="modern"
          validation={{ required: 'Select the school’s local authority' }}
        >
          <option value="camden">Camden</option>
        </SelectField>
        <ShowErrors trigger={trigger} />
      </div>
    )}
  </Form>
)