# Nosepiece tabs

A tab set for three to five views, worked as a microscope turret: the chosen lens swings into line above the panel, and the panel changes once it has clicked home.

Kit part · With the Kit · https://tactileui.dev/parts/nosepiece-tabs

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The authored tablist and panels are gathered by the script. Each tab becomes a tapered barrel hung from a zero size point at the disc centre, with its own length a little different from its neighbours; its round label collar is turned back by the same angle as the barrel, so the words stay level while the metal goes round. A drag reads the pointer angle around the disc and snaps to the nearest detent.

## Variants

- Four tabs
- Five tabs
- One out of action

## States

- Chosen · Profile
- Chosen · Billing
- Mid-turn
- Capped lens
- Focus on a lens

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-value | attribute | The value the change event reports. Falls back to the button value, then its id. |
| change | event | Fires on the set after the chosen panel is shown. Bubbles. |
| nosepieceTurn(from, to, count, step) | function | Pure: the shortest signed angle from one detent to another. A half turn is a tie and is taken clockwise. |
| NOSEPIECE_LENGTHS | constant | The five barrel lengths as fractions of the disc, in tab order, so no two objectives are quite the same length. |
| disabled | attribute | The lens is drawn with a dust cap and no key or press reaches it. |
| Left · Right · Home · End | keyboard | Move the focus and choose, skipping a capped lens. |
| pointer drag | pointer | The turret follows the pointer and settles into the nearest detent on release. |

## Usage notes

Press a lens or its label, use the arrow keys, or drag the turret round. It clicks into the nearest lens, and the panel changes when it lands.

## Accessibility

- The tabs keep the WAI-ARIA tabs pattern: one Tab stop for the list, arrows inside it, and each panel linked both ways.
- Focus rings the round label collar rather than the whole barrel, and stays visible while the turret turns.
- A capped lens is skipped by the arrow keys and by Home and End, and it cannot be pressed.
- At narrow widths the stamped labels fade out but still name their buttons; the current label is printed under the turret.
- With reduced motion the panel changes at once, so no information is carried by the turn alone.

## Related parts

- [Tabs](https://tactileui.dev/parts/tabs): Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.
- [Selector](https://tactileui.dev/parts/selector): One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
- [Swatch fan](https://tactileui.dev/parts/swatch-fan): A dropdown drawn as a paint swatch fan pinned on a rivet. The one blade it shows closed is the current choice, its tone and its printed name set once, nowhere else; a press swings the rest of the blades open from that same rivet, each stopped at its own angle, and picking one furls the fan again on the new choice. A real select carries the value and is the whole control with no script at all.