Select Menu Field

Related components

SelectMenuField wraps a SelectMenu with a Label, an optional description and prompt, and an error message. It is the default way to choose one option from a list.

It has a filled background and no border (it has no appearance prop). Use theme to choose the fill.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <SelectMenuField name="class" label="Class" placeholder="Select a class" className="w-80">
      <SelectMenu.Item id="7a">7A</SelectMenu.Item>
      <SelectMenu.Item id="7b">7B</SelectMenu.Item>
      <SelectMenu.Item id="7c">7C</SelectMenu.Item>
    </SelectMenuField>
  </Form>
</div>

Theme

Use theme="grey" (default) 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">
      <SelectMenuField name="grey" label="Class" placeholder="Select a class" theme="grey">
        <SelectMenu.Item id="7a">7A</SelectMenu.Item>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
        <SelectMenu.Item id="7c">7C</SelectMenu.Item>
      </SelectMenuField>
    </div>
    <div className="w-80 rounded-md bg-grey-100 p-6">
      <SelectMenuField name="white" label="Class" placeholder="Select a class" theme="white">
        <SelectMenu.Item id="7a">7A</SelectMenu.Item>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
        <SelectMenu.Item id="7c">7C</SelectMenu.Item>
      </SelectMenuField>
    </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">
      <SelectMenuField placeholder="Select a class" name="sm" size="sm" label="Size sm">
        <SelectMenu.Item id="7a">7A</SelectMenu.Item>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
        <SelectMenu.Item id="7c">7C</SelectMenu.Item>
      </SelectMenuField>
      <SelectMenuField placeholder="Select a class" name="md" size="md" label="Size md">
        <SelectMenu.Item id="7a">7A</SelectMenu.Item>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
        <SelectMenu.Item id="7c">7C</SelectMenu.Item>
      </SelectMenuField>
      <SelectMenuField placeholder="Select a class" name="lg" size="lg" label="Size lg">
        <SelectMenu.Item id="7a">7A</SelectMenu.Item>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
        <SelectMenu.Item id="7c">7C</SelectMenu.Item>
      </SelectMenuField>
    </div>
  </Form>
</div>

States

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}} defaultValues={{ filled: '7b', disabled: '7b' }}>
    <div className="flex w-80 flex-col gap-6">
      <SelectMenuField name="placeholder" label="Placeholder" placeholder="Select a class">
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
      </SelectMenuField>
      <SelectMenuField name="filled" label="Filled">
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
      </SelectMenuField>
      <SelectMenuField name="disabled" label="Disabled" disabled>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
      </SelectMenuField>
    </div>
  </Form>
</div>

Error

The trigger background turns dangerLight.

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">
        <SelectMenuField
          name="class"
          label="Class"
          placeholder="Select a class"
          validation={{ required: 'Select a class for this pupil' }}
        >
          <SelectMenu.Item id="7a">7A</SelectMenu.Item>
          <SelectMenu.Item id="7b">7B</SelectMenu.Item>
        </SelectMenuField>
        <ShowErrors trigger={trigger} />
      </div>
    )}
  </Form>
)

Groups

Group long lists with SelectMenu.Group, SelectMenu.Label and SelectMenu.Separator.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <SelectMenuField name="class" label="Class" placeholder="Select a class" className="w-80">
      <SelectMenu.Group>
        <SelectMenu.Label>Year 7</SelectMenu.Label>
        <SelectMenu.Item id="7a">7A</SelectMenu.Item>
        <SelectMenu.Item id="7b">7B</SelectMenu.Item>
      </SelectMenu.Group>
      <SelectMenu.Separator />
      <SelectMenu.Group>
        <SelectMenu.Label>Year 8</SelectMenu.Label>
        <SelectMenu.Item id="8a">8A</SelectMenu.Item>
        <SelectMenu.Item id="8b">8B</SelectMenu.Item>
      </SelectMenu.Group>
    </SelectMenuField>
  </Form>
</div>