Search

Overview

The Search component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

Search inputs need a clear icon, a way to clear the query, and often a dropdown with recent results. A dedicated search component bundles these patterns.

Mental model

When to use

When not to use

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

import { useState } from 'react';
import { Search } from '@byteion/react';

export default function SearchDemo() {
  const [query, setQuery] = useState('');
  return (
    <div className="grid max-w-md gap-4 p-6">
      <Search placeholder="Search projects" value={query} onChange={setQuery} />
      <Search placeholder="Press ⌘K to search" shortcut="⌘K" />
      <Search placeholder="Disabled" disabled />
    </div>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Search } from '@byteion/vue';

const query = ref('');
</script>

<template>
  <div class="grid max-w-md gap-4 p-6">
    <Search v-model="query" placeholder="Search projects" />
    <Search placeholder="Press ⌘K to search" shortcut="⌘K" />
    <Search placeholder="Disabled" disabled />
  </div>
</template>

States

This component reacts seamlessly to the following interaction and data states:

• idle — idle state.
• focus — Keyboard or tab focus — shows ring indicator for accessibility.
• open — Component is expanded or visible.
• default — Resting appearance before interaction.
• hover — Pointer is over the element — visual feedback via color or shadow.
• active — Currently selected or in use.
• disabled — Non-interactive — grayed out, cursor not-allowed.

Anatomy

Usage guidelines

• Place search icon on the left.
• Show clear button only when there is text.
• Use Cmd+K shortcut for global search.

Do and Don't

Accessibility

Native input with search role. Clear button must be a button element.

Customization

Follows input tokens.

import { cva, cn, type VariantProps } from '@byteion/react';

const mySearch = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof mySearch>;

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const mySearch = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => mySearch({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX

API Reference

Enhanced input with clear button trigger.

export interface SearchProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
  /** Keyboard shortcut hint shown on the right edge (e.g. "⌘K"). */
  shortcut?: ReactNode;
  /** Visual style. */
  variant?: 'default' | 'compact';
  /** Optional accessible label override. */
  'aria-label'?: string;
}

export interface SearchProps {
  modelValue?: string;
  /** Keyboard shortcut hint shown on the right edge (e.g. "⌘K"). */
  shortcut?: string;
  /** Visual style. */
  variant?: 'default' | 'compact';
  placeholder?: string;
  ariaLabel?: string;
  id?: string;
}

Developer tips

Common mistakes

Production usage tips

Premium examples

Advanced patterns available in Byteion Pro:

Related components

• Input
• Combobox
• Dropdown