# segmentedItem

> Draws one segment.

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

Draws one segment. A resting segment is muted ink on the track and takes a translucent
wash on hover; the chosen one is a raised tile edged in the strong border role, which
keeps at least 3:1 against the track in either scheme, with emphasis ink in semibold.
The states compose into one rule, so the chosen state wins whatever order layers land in.

## Signature

```ts
segmentedItem<Node extends Element = Element>(options?: SegmentedItemOptions): UtilityMixin<Node>
```

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `SegmentedItemOptions` | Selectors for the chosen and focused states. |

## Examples

```tsx
<button aria-pressed={active ? "true" : "false"} mix={[segmentedItem()]}>{label}</button>;
```

```tsx
<label mix={[segmentedItem({ selected: "&:has(input:checked)", focused: "&:has(input:focus-visible)" })]} />;
```

## 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. |