Search

import { Search } from '@uswds-tailwind/react'

export default function SearchDemo() {
  return (
    <div className="max-w-lg">
      <Search.Root>
        <Search.Label>Search</Search.Label>
        <Search.Input />
        <Search.Button>Search</Search.Button>
      </Search.Root>
    </div>
  )
}

import { Search } from '@uswds-tailwind/react'

export default function SearchLargeDemo() {
  return (
    <div className="max-w-lg">
      <Search.Root size="lg">
        <Search.Label>Search</Search.Label>
        <Search.Input />
        <Search.Button>Search</Search.Button>
      </Search.Root>
    </div>
  )
}

import { Search } from '@uswds-tailwind/react'

export default function SearchIconButtonDemo() {
  return (
    <div className="max-w-lg">
      <Search.Root size="sm">
        <Search.Label>Search</Search.Label>
        <Search.Input />
        <Search.Button aria-label="Search" />
      </Search.Root>
    </div>
  )
}