Apple Select

An iOS-style text highlight with a translucent band and a lollipop handle at each end. The span is fixed by the author rather than dragged. It's a presentational highlight, not a draggable control, so it always reads the way you set it.

Installation

npx stepwise-ui add apple-select

Default

Pass the highlighted range as `[start, end]` character offsets. The band and handles get a little edge padding so they never sit on the glyphs.

Introduced with iOS 3 in June 2009 was the ability to select, copy and paste text using selection handles displayed on either end of the highlighted range.

import { AppleSelect } from '@/components/stepwise/apple-select'

// the author picks the highlighted range - it's fixed, not draggable
<AppleSelect
  text="Introduced with iOS 3 in June 2009 was the ability to select…"
  selection={[43, 60]}
/>

Accents

The handles and highlight both follow `accent` - one of the bundled system tints or any hex value. Pick one with the ColorSwatch below.

A fixed highlight the author sets - the band and both handles follow the accent.

import { AppleSelect, APPLE_ACCENTS } from '@/components/stepwise/apple-select'

<AppleSelect text={text} selection={[2, 22]} accent={APPLE_ACCENTS.purple} />
<AppleSelect text={text} selection={[2, 22]} accent="#ff2d55" />   // any hex works

Props

PropTypeDescription

text

string

The full text.

selection

[number, number]

The highlighted range as [start, end] offsets. Defaults to a word mid-text.

accent

string

Handle + highlight colour. Default iOS blue.

edgePadding

number

Breathing room (px) on each edge of the highlight. Default 3.