Apple Select
text and a [start, end] character range, and the component splits the string around it. That makes it ideal for docs, onboarding tips and marketing copy where you want to point at part of a sentence without a screenshot. The handles are purely decorative and are hidden from assistive tech; the text itself stays one uninterrupted string. It renders as a <p> — or, with as="span", inline inside a paragraph of your own — and any other HTML attribute (className, style, id…) is forwarded to it.Apple Select
Pass the full text and the [start, end] character range to highlight.
selection- is the character range —
endis exclusive, exactly likeString.slice, so[43, 60]covers"ability to select".
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Apple Select
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Nothing beyond the shared setup — Apple Select needs only the cn helper and lucide-react, which the installation guide already put in place.
Examples
Without handles
- Set
handles{false} - to keep the translucent highlight and drop the lollipops — closer to a desktop selection.
Animated
Hit Reset on the preview to replay the entrance.
- Set
animate - to fade the highlight in and pop the handles on mount — handy when the selection is the point of the slide.
Across lines
selection- can span as many lines as it needs; each wrapped fragment keeps its own rounded corners and the handles sit at the true start and end.
Features
Author-controlled
The range is a pair of numbers in code, so the same selection renders identically for every visitor — no screenshots, no drift.
Accessible
The handles are hidden from assistive tech and the highlighted span uses a semantic mark, so the sentence reads as one string.
Inherits typography
Handles and highlight are sized in em, so they scale with whatever font size and weight you apply through className.
Zero dependencies
Plain React and CSS — the optional entrance animation ships its own keyframes, so there is nothing to add to your global styles.
Best Practices & Guidelines
Land on word boundaries
Compute selection from the text (for example text.indexOf("ability")) rather than hard-coding magic numbers, so an edit to the copy cannot leave the highlight cutting through a word.
It is not a real selection
The handles do not drag and the range does not copy. Use it to illustrate a selection, not to replace the browser's native one.
Props Reference
<AppleSelect> Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The full sentence or paragraph to render. |
selection | [number, number] | [number, number][] | Required | Character range to highlight as [start, end], or several ranges for more than one phrase — each gets its own handles. end is exclusive, like String.slice; out-of-range values are clamped, overlapping ranges merge, and an empty range renders plain text. |
color | string | "var(--primary)" | Accent for the highlight tint and the handles. Accepts any CSS colour, including hex codes. |
handles | boolean | true | Show the iOS-style lollipop handles on either end of the range. |
animate | boolean | false | Fade the highlight in and pop the handles when the component mounts. |
as | "p" | "span" | "p" | The element to render. Use "span" to highlight a phrase inside a paragraph of your own; inline, it takes the surrounding line height. |