Select

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Search Field Slider →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add forms/select

Plain-CSS theme — no build step

npx astrocraft-ui add forms/select --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add forms/select --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/select --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/select --theme tailwind --bridge lumos

Select

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`Select.astro`	`chevron` `select` `select-root`	`data-size`: `sm` · `md` · `lg` `data-state`: `default` · `error` · `success`	—	—

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.

src/components/ui/forms/select/Select.astro

---
// src/components/ui/forms/select/Select.astro — headless primitive (see ../../README.md).
// Native <select> with the shared `data-size` / `data-state` field surface. Pass <option>s as
// children. Zero-JS. The chevron ships as a sibling so a theme that sets `appearance: none` has one
// to show; a theme that leaves the native control alone should hide it
// (`[data-slot="select-root"] [data-slot="chevron"] { display: none }`) — the UA draws its own.
// For a searchable/custom-dropdown select see ComboBox / AdvancedSelect.
import type { HTMLAttributes } from "astro/types";

import Chevron from "../../_Chevron.astro";

type Props = HTMLAttributes<"select"> & {
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
};

const { size = "md", state = "default", class: className, ...rest } = Astro.props;
---

<div data-slot="select-root">
  <select class={className} data-slot="select" data-size={size} data-state={state} {...rest}>
    <slot />
  </select>
  <slot name="chevron"><Chevron /></slot>
</div>

src/components/ui/forms/select/index.ts

import Select from "./Select.astro";

export { Select };
export default Select;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/select — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

Select

Attribute surface

Source

What you get