SearchInput

import { SearchInput } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <SearchInput aria-label="Search templates" placeholder="Search templates" shortcut="/" />
    </div>
  );
}

import * as React from 'react';
import { SearchInput } from '@bindshq/stance-react';

const users = ['Priya Raman', 'Tom Okafor', 'Lena Fischer', 'Marco Bianchi', 'Aiko Tanaka'];

export function Filtering() {
  const [query, setQuery] = React.useState('');
  const results = users.filter((u) => u.toLowerCase().includes(query.toLowerCase()));
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <SearchInput
        aria-label="Search organisation users"
        placeholder="Search users"
        value={query}
        onValueChange={setQuery}
      />
      <p role="status" style={{ margin: 0, fontSize: 13 }}>
        {results.length} {results.length === 1 ? 'user' : 'users'}
      </p>
      <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14 }}>
        {results.map((u) => (
          <li key={u}>{u}</li>
        ))}
      </ul>
    </div>
  );
}

import { SearchInput } from '@bindshq/stance-react';

export function Loading() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <SearchInput size="sm" aria-label="Search (small)" defaultValue="NDA" />
      <SearchInput aria-label="Search contracts" defaultValue="Master services" loading />
      <SearchInput
        size="lg"
        aria-label="Search (large)"
        placeholder="Search everything"
        shortcut="⌘K"
      />
    </div>
  );
}