# segmentedTrack

> Draws the track the segments sit in: a recessed tint with a hairline edge and an inner padding that leaves room for the chosen segment's edge and the focus ring.

```ts
import { segmentedTrack } from "@sdxc/ui/styles";
```

Draws the track the segments sit in: a recessed tint with a hairline edge and an inner
padding that leaves room for the chosen segment's edge and the focus ring.

## Signature

```ts
segmentedTrack<Node extends Element = Element>(): UtilityMixin<Node>
```

Returns: A `css()` mixin ready for the track's `mix` prop.

## Examples

```tsx
<div role="group" aria-label={t("range")} mix={[segmentedTrack()]}>{segments}</div>;
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/styles` too.

### SegmentedItemOptions

Options accepted by segmentedItem.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `selected?` | `string` | Selector, relative to the segment, that matches while it is the chosen one. |
| `focused?` | `string` | Selector, relative to the segment, that matches while keyboard focus is on it. |