SearchField.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import vanillaDocs from 'docs:vanilla-starter/SearchField'; import {SearchField as VanillaSearchField} from 'vanilla-starter/SearchField'; import {SearchField as TailwindSearchField} from 'tailwind-starter/SearchField'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/searchfield/docs/anatomy.svg';

export const tags = ['input'];

SearchField

{docs.exports.SearchField.description}

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.

"use client";
import {SearchField} from 'vanilla-starter/SearchField';
import {useState} from 'react';

function Example() {
  let [search, setSearch] = useState('');
  let [submittedSearch, setSubmittedSearch] = useState('');
  
  return (
    <div>
      <SearchField
        label="Search"
        placeholder="Search documents"
        ///- begin highlight -///
        value={search}
        onChange={setSearch}
        onSubmit={setSubmittedSearch} />
      {/*- end highlight -*/}
      <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.

"use client";
import {SearchField} from 'vanilla-starter/SearchField';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'vanilla-starter/Form';;

function Example(props) {
  return (
    <Form>
      <SearchField
        {...props}
        label="Search"
        placeholder="Search documents"
        ///- begin highlight -///
        name="search"
        /* PROPS */
        ///- end highlight -///
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

Examples

API

<SearchField>
  <Label />
  <Input />
  <Button />
  <Text slot="description" />
  <FieldError />
</SearchField>

SearchField