SearchField

A search field allows a user to enter and clear a search query.

Theme

label

description

isDisabled

Example

SearchField.tsx

SearchField.css

Example

SearchField.tsx

SearchField.css

import {SearchField} from './SearchField';

<SearchField
  label="Search"
  placeholder="Search documents" />

Value

Use the value or defaultValue prop to set the text value, and onChange to handle user input. onSubmit is called when the user presses Enter.

Value: 
Submitted value:

import {SearchField} from './SearchField';
import {useState} from 'react';

function Example() {
  let [search, setSearch] = useState('');
  let [submittedSearch, setSubmittedSearch] = useState('');
  
  return (
    <div>
      <SearchField
        label="Search"
        placeholder="Search documents"
        value={search}
        onChange={setSearch}
        onSubmit={setSubmittedSearch} />
      <pre style={{fontSize: 12}}>
        Value: {search}{'\n'}
        Submitted value: {submittedSearch}
      </pre>
    </div>
  );
}

Forms

Use the name prop to submit the text value to the server. Set the isRequired, minLength, maxLength, pattern, or type props to validate the value, or implement custom client or server-side validation. See the Forms guide to learn more.

isRequired

type

pattern

minLength

maxLength

import {SearchField} from './SearchField';
import {Button} from './Button';
import {Form} from './Form';;

function Example(props) {
  return (
    <Form>
      <SearchField
        {...props}
        label="Search"
        placeholder="Search documents"
        name="search"
        isRequired
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

SearchField

Vanilla CSS theme

Value

Forms

type

Examples

API