GitHub

segmented

iOS-style segmented control built from hidden radio inputs. The selected segment is highlighted via CSS — no JavaScript required.

Basic

DayWeekMonth

segmented({
  name:  'period',
  value: state.period,
  options: [
    { value: 'day',   label: 'Day'   },
    { value: 'week',  label: 'Week'  },
    { value: 'month', label: 'Month' },
  ],
})

Sizes

segmented({ name: 'view', value: 'b', size: 'sm', options: [...] })
segmented({ name: 'view', value: 'b', size: 'md', options: [...] })
segmented({ name: 'view', value: 'b', size: 'lg', options: [...] })

View toggle

A common use case — toggling between Grid and List views.

GridList

segmented({
  name:    'layout',
  value:   state.layout,
  options: [
    { value: 'grid', label: 'Grid' },
    { value: 'list', label: 'List' },
  ],
})

The segmented control submits the selected value string under name in FormData. Read it via formData.get('period') in action.onStart or action.run.

Prop	Type	Default
`name`	string	—	Field name — submitted in FormData
`options`	array	[]	Array of `{ value, label }`
`value`	string	—	The currently selected value
`size`	`sm \| md \| lg`	`md`
`disabled`	boolean	false	Disables all options
`class`	string	—