Segmented

A compact control for switching between a small set of exclusive options.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Segmented } from "@aile.sh/elia";

export function Example() {
  const [range, setRange] = useState("week");
  return (
    <Segmented
      className="w-60"
      options={[
        { value: "day", label: "Day" },
        { value: "week", label: "Week" },
        { value: "month", label: "Month" },
      ]}
      value={range}
      onChange={setRange}
    />
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia