Chip
Sourcecomponents/Chip.astro
Overview
Five states — default, hover, selected, focus and disabled — on light, dark & image. The whole pill is the hit area; it fills on select.
On light
default
hover
selected
focus
disabled
On dark
default
hover
selected
focus
disabled
On image
default
hover
selected
focus
disabled
Multi-select
Chips are always multi-select — several can be on at once. To pick exactly one (switching a view) use a Tab Row.
Pick any
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | — | Field name — shared across the set. |
value | string | — | Submitted value when selected. |
checked | boolean | false | Selected by default. |
disabled | boolean | false | Dims and blocks the chip. |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
Usage
Wrap a set in a flex row that wraps. All chips in the set share one name; any number can be selected.
<!-- Multi-select tag / option picker — several can be on at once -->
<Chip name="services" value="branding" checked>Branding</Chip>
<Chip name="services" value="web">Web</Chip>
<Chip name="services" value="strategy" checked>Strategy</Chip>Rules
Do
Use for a scannable set of short options — services, budgets, tags.
Keep labels to a word or two so the pills stay tidy.
Don't
Use chips to pick exactly one / switch a view — that's a Tab Row.
Pack long sentences into a pill — it wraps and loses the shape.