segmented-input
A tiny, dependency-free library that turns any <input> into a
segmented picker — just like <input type="date"> —
for any custom format: IPv4, RGBA, UUID, MAC, duration, and more.
👋 Try it — click any field, then use ↑ ↓ to change values
👉 Click to select
Click any segment to highlight it instantly. No cursor hunting.
↑ ↓ Increment / decrement
Arrow keys change the focused segment, clamped to min/max.
← → Navigate
Left/right arrows and Tab move between segments, or leave the field.
🪟 Zero dependencies
Pure ES module, ~5 kb. No build step. Drop in anywhere.
🌟 Any format
Provide parse + format functions and define your own segments.
Installation
No build step required. Import directly from a CDN or install with npm:
<!-- Via CDN (jsDelivr) -->
<script type="module">
import { SegmentedInput } from 'https://cdn.jsdelivr.net/npm/segmented-input@0.1.0/src/segmented-input.js'
import * as presets from 'https://cdn.jsdelivr.net/npm/segmented-input@0.1.0/src/presets.js'
</script>// npm
// npm install segmented-input
import { SegmentedInput } from 'segmented-input/src/segmented-input.js'
import * as presets from 'segmented-input/src/presets.js'Quick start
<input id="color" value="rgba(125, 125, 125, 0.5)" />
<script type="module">
import { SegmentedInput, presets } from './index.js'
// Attach the RGBA preset — first click focuses the "r" segment
new SegmentedInput(document.getElementById('color'), presets.rgba)
</script>See the full API reference for custom formats, all preset options, instance methods, and events — or jump straight to the live demos to see every built-in preset in action.