SearchBar

Search input forwarding to Arco's SearchBar with active-state styling.

Empty

Placeholder-only state.

import { useState } from "react"

import { SearchBar } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function SearchBarEmptyPreview() {
  const [value, setValue] = useState("")
  return (
    <PreviewLayout>
      <SearchBar
        value={value}
        onChange={(v) => setValue(v)}
        placeholder="Search rewards, stores, brands…"
      />
    </PreviewLayout>
  )
}

With value

A clear button appears automatically once there's content.

import { useState } from "react"

import { SearchBar } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function SearchBarFilledPreview() {
  const [value, setValue] = useState("starbucks")
  return (
    <PreviewLayout>
      <SearchBar
        value={value}
        onChange={(v) => setValue(v)}
        placeholder="Search…"
      />
    </PreviewLayout>
  )
}

Installation

pnpm add @appboxo/ui-kit

Theme tokens

--search-bar-input-wrapper-background-color, --search-bar-*.

Radio PickerInput

On This Page

Empty With value Installation Theme tokens

Build mini-apps with Boxo

Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.