Componentsbeta
Dance style picker
Pick dances from the WeDance taxonomy — 150 styles in 14 families. Popular styles first, the rest one tap away grouped by family, and a search that knows aliases like “LA style”, “On2” or “Kompa”.
Example
2 selected
Pick all you dance — you can change this later.
Value: ["Salsa","Urban Kiz"]
vue
<Field label="Which dances?" optional>
<DanceStylePicker v-model="form.danceStyles" />
</Field>States
Salsa
Cuban
Caribbean & Latin party
1 selected
3 selected
“Afro-Cuban” is an alias of Afro; “Pole fusion” is unknown, so it shows as a removable chip.
1 selected
Single choice · restricted options
vue
<Field label="Dance style" optional>
<DanceStylePicker v-model="goalStyles" single :searchable="false" />
</Field>Salsa
Cuban
1 selected
vue
<!-- only what this festival teaches, no search for a short list -->
<DanceStylePicker v-model="picked" :options="festival.styles" />Filter row
DanceStyleFilter is the single-select row on filter surfaces (city pages, festivals) — the picker's chips without search or families.
Value: "Bachata"
vue
<!-- single-select filter: tap again to clear, v-model is '' when off -->
<DanceStyleFilter v-model="selectedStyle" :styles="city.styles" />Read-only chips
DanceStyleChips shows stored styles on cards and profiles, tinted by family.
- Salsa
- Zouk
- Urban Kiz
- Lindy Hop
- Tango
vue
<DanceStyleChips :styles="artist.styles" :max="3" />Taxonomy
One source of truth in shared/dance-styles.ts, used by the picker, filters and the v3 sync.
vue
import { findDanceStyle, sortDanceStyles, canonicalDanceStyle } from '#shared/dance-styles'
findDanceStyle('urban kizz') // → { id: 'urban-kiz', name: 'Urban Kiz', family: 'kizomba', … }
canonicalDanceStyle('LA style') // → 'Salsa'
sortDanceStyles(['Zouk', 'Salsa']) // → ['Salsa', 'Zouk'] (popularity order)| Family | Styles (popularity order) |
|---|---|
| Salsa | Salsa · Salsa LA · Salsa NY · Salsa Colombian · Latin Fusion · Mambo · Pachanga · Salsaton |
| Cuban | Casino · Timba · Rueda · Rumba · Afro-Cuban · Son Cubano · Reparto · Cha-Cha-Cha · Bolero · Contradanza · Danzón · Rumba Columbia · Rumba Yambu |
| Bachata | Bachata · Bachata Sensual · Bachata Dominicana · Bachata Moderna · Bachatango |
| Kizomba & Semba | Kizomba · Urban Kiz · Tarraxo · Semba · Douceur · Kuduro · Urban Tarraxa |
| Brazilian | Zouk · Lambada · Samba · Forró · Capoeira · Funk Carioca · Maxixe |
| Caribbean & Latin party | Reggaeton · Merengue · Dancehall · Cumbia · Bump · Champeta · Dembow · Grinding · Kompa · Perreo · Vallenato · Zouk Love |
| African | Afrobeats · Afro House · Amapiano |
| Swing | Lindy Hop · West Coast Swing · Balboa · Boogie-Woogie · Charleston · Collegiate Shag · East Coast Swing · Hand Dancing · Modern Jive · Rock and Roll · Shimmy · Swing |
| Tango | Tango · Contact Tango · Finnish Tango · Milonga · Show Tango · Tango Camacupense · Tango Canyengue · Tango Liso · Tango Nuevo · Tango Oriental Uruguayan · Tango Orillero · Tango Salon · Tango Valparaísino · Tango Vals |
| Ballroom | Ballroom · Ballroom Cha-Cha · Ballroom Latin · Ballroom Samba · Ballroom Tango · Discofox · Foxtrot · Jive · Paso Doble · Quickstep · Rhumba · Viennese Waltz · Waltz |
| Street & urban | Hip Hop · Breaking · Commercial · Electric Boogaloo · High Heels · House · K-Pop · Krump · Locking · Popping · Street Dance · Twerk · Vogue |
| Stage & studio | Ballet · Belly Dance · Burlesque · Contemporary · Flamenco · Jazz · Modern · Pole Dance · Zumba |
| Folk & world | Adıyaman · Bar · Bavarian Folk · Ceili · Ceilidh · Country Dance · Halay · Hora · Horon · Jig · Kaşık Oyunu · Kolbaştı · Polka · Schottische · Semah · Sevillanas · Şıksaray · Spanish Bolero · Van · Zeybek |
| Indian | Bhangra · Bharatanatyam · Bollywood · Garba · Ghoomar · Kathak · Kathakali · Kuchipudi · Lavani · Manipuri · Mohiniyattam · Odissi · Rasleela · Sattriya |
| Workshop topics | Ladies Styling · Theory |
Props
DanceStylePicker
| Prop | Type | Default | Description |
|---|---|---|---|
| v-model | string[] | [] | Canonical style names — the values 2026 stores (`Salsa`, `Urban Kiz`). Unknown legacy values are kept and shown as removable chips. |
| options | string[] | all | Restrict the choice to these names or aliases (e.g. a festival’s styles). |
| single | boolean | false | At most one; choosing another replaces it. v-model stays an array. |
| searchable | boolean | true | Show the search box (hidden anyway when the list is no longer than popularCount). |
| expanded | boolean | false | Open every family from the start instead of “popular first”. |
| popularCount | number | 8 | How many of the most popular styles lead before “All styles”. |
| label | string | "Dance styles" | Accessible name of the chip group. The Field label names the search box. |
| placeholder | string | — | Search box placeholder. |
| disabled · invalid | boolean | false | Also read from a surrounding Field. |
DanceStyleFilter
| Prop | Type | Default | Description |
|---|---|---|---|
| v-model | string | '' | The active style, emitted as passed in `styles`; empty when cleared. Alias-aware: “salsa” keeps Salsa on. |
| styles | string[] | — | Styles to offer (e.g. what a city’s events have); sorted by popularity, aliases de-duplicated. |
| lead | number | 3 | How many show before “+N more” (the active style always stays visible). |
| label | string | "Filter by dance style" | Accessible name of the chip group. |
DanceStyleChips
| Prop | Type | Default | Description |
|---|---|---|---|
| styles | string[] | — | Stored style values; sorted by popularity, aliases shown by canonical name. |
| max | number | 0 | Show this many then “+N”. 0 = all. |
| size | 'sm' | 'md' | 'sm' | Chip size. |
Do & don't
1 selected
Do — Use the picker wherever someone chooses styles, so values match the taxonomy and filters find them.
Don't — Hard-code a short style list in a page — it drifts (Afro-Cuban vs Afro, Cha-Cha vs Cha-Cha-Cha) and filters miss it.
Accessibility
- Every style is a real
buttonwitharia-pressed(ToggleChip): Tab to it, Space/Enter toggles it. - The Field label names the search box; the chip group has its own accessible name (
labelprop) and the Field hint/error viaaria-describedby. - In the search box, Enter toggles the best match and clears the query; Escape clears the query.
- Result counts and the selection count are announced through a polite live region.
- Families are
sections labelled by their heading, so screen-reader users can jump between them. - Selected chips add a check icon, so state never relies on colour alone.