Search Field

View source Report an issue

Related components

Search Input

SearchField renders a SearchInput with a Label, an optional description and prompt, and an error message. It is the preferred way to let people search or filter a list.

It shows a search icon when empty. Once people type, the icon becomes a button that clears the field (announced as "Clear", change it with clearText). Use onValueChange to react as people type.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <SearchField
      name="search"
      label="Search pupils"
      hideLabel
      placeholder="Search by name or UPN"
      appearance="modern"
      className="w-80"
    />
  </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">
      <SearchField label="Search pupils" placeholder="Search by name or UPN" name="standard" appearance="standard" />
      <SearchField label="Search pupils" placeholder="Search by name or UPN" name="modern" appearance="modern" />
    </div>
  </Form>
</div>

Theme

With appearance="modern", use theme="grey" on white surfaces and theme="white" on grey surfaces, such as a grey filter bar.

<Form onSubmit={() => {}}>
  <div className="flex flex-col gap-4">
    <div className="w-80 rounded-md border border-grey-200 bg-white p-6">
      <SearchField label="Search pupils" placeholder="Search by name or UPN" name="grey" appearance="modern" theme="grey" />
    </div>
    <div className="w-80 rounded-md bg-grey-100 p-6">
      <SearchField label="Search pupils" placeholder="Search by name or UPN" name="white" appearance="modern" theme="white" />
    </div>
  </div>
</Form>

Size

sm, md (default) and lg. Filter bars use sm.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <SearchField placeholder="Search by name or UPN" name="sm" size="sm" appearance="modern" label="Size sm" />
      <SearchField placeholder="Search by name or UPN" name="md" size="md" appearance="modern" label="Size md" />
      <SearchField placeholder="Search by name or UPN" name="lg" size="lg" appearance="modern" label="Size lg" />
    </div>
  </Form>
</div>

States

Empty (search icon), filled (clear button) and disabled.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}} appearance="modern">
    <div className="flex w-80 flex-col gap-6">
      <SearchField name="empty" label="Empty" placeholder="Search by name or UPN" />
      <SearchField name="filled" label="Filled" defaultValue="Amara" />
      <SearchField name="disabled" label="Disabled" placeholder="Search by name or UPN" disabled />
    </div>
  </Form>
</div>

Error

Search rarely needs validation. When it does, such as a minimum length, errors appear on blur and on submit.

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">
        <SearchField
          name="standard"
          label="Search pupils (standard)"
          validation={{ required: 'Enter a name or UPN to search' }}
        />
        <SearchField
          name="modern"
          label="Search pupils (modern)"
          appearance="modern"
          validation={{ required: 'Enter a name or UPN to search' }}
        />
        <ShowErrors trigger={trigger} />
      </div>
    )}
  </Form>
)