Components — Modern React UI Library

Examples

Interactive Filter Bar

Demonstrates a filter bar with an input search, a date picker, and a text input, each with tooltips for enhanced usability.

Search everywhere...

"use client";
import { Button, DatePicker, Input, Tooltip, Tag } from "@g4rcez/components";
import { FunnelIcon } from "@phosphor-icons/react";

function InteractiveFilterBar() {
  return (
    <div className="flex flex-nowrap gap-4 items-end">
      <Input
        required
        placeholder="Text..."
        title="Search everywhere..."
      />
      <Tooltip
        hover={false}
        placement="bottom"
        title={
          <Tag className="cursor-pointer" as="button" type="button">
            Date
          </Tag>
        }
      >
        <div className="flex flex-col gap-4">
          <DatePicker
            floating={false}
            required
            placeholder="Today"
            title="Date"
          />
        </div>
      </Tooltip>
      <Tooltip
        hover={false}
        placement="bottom"
        title={
          <Tag className="cursor-pointer" as="button" type="button">
            Text
          </Tag>
        }
      >
        <Input
          required
          placeholder="Text..."
          title="Search everywhere..."
        />
      </Tooltip>
      <Button size="small">
        <FunnelIcon />
      </Button>
    </div>
  );
}

When to use Filter Bar

Use when

You need the documented Filter Bar interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Filter Bar behavior you need.

Accessibility

Keep the Filter Bar labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.