SearchField

import { SearchField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div role="search" style={{ width: '100%', maxWidth: 480 }}>
      <SearchField name="q" placeholder="Search the docs" aria-label="Search the docs" />
    </div>
  )
}

'use client'

import { useState } from 'react'
import { List, ListItem, Paragraph, SearchField } from '@systhemaui/next'

const components = ['Accordion', 'Button', 'Card', 'Carousel', 'Chip', 'Gallery', 'Heading']

export default function Demo() {
  const [query, setQuery] = useState('')
  const matches = components.filter((name) => name.toLowerCase().includes(query.toLowerCase()))

  return (
    <div style={{ display: 'grid', gap: 16, width: '100%', maxWidth: 480 }}>
      <SearchField
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Filter components"
        aria-label="Filter components"
      />
      {matches.length > 0 ? (
        <List>
          {matches.map((name) => (
            <ListItem key={name}>{name}</ListItem>
          ))}
        </List>
      ) : (
        <Paragraph type="small">No component matches “{query}”.</Paragraph>
      )}
    </div>
  )
}

import { FormGroup, FormRow, FormSelect, Option, SearchField } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormRow style={{ width: '100%', maxWidth: 640 }}>
      <FormGroup>
        <SearchField name="filter-q" placeholder="Search posts" aria-label="Search posts" />
      </FormGroup>
      <FormGroup>
        <FormSelect name="filter-category" defaultValue="all" aria-label="Category">
          <Option value="all">All categories</Option>
          <Option value="news">News</Option>
          <Option value="guides">Guides</Option>
        </FormSelect>
      </FormGroup>
    </FormRow>
  )
}

import { SearchField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <SearchField
        name="q-location"
        placeholder="City or postcode"
        aria-label="City or postcode"
        icon={
          <svg
            viewBox="0 -960 960 960"
            width="100%"
            height="100%"
            fill="currentColor"
            focusable="false"
          >
            <path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z" />
          </svg>
        }
      />
    </div>
  )
}