kit
Segmented control

Built revision v17.10.0
CSS core
Topics
Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.
On Find, Calendar
Segmented control

Charge by
Hour Day Week
Day Applies to every booking of this room.
Charge by while bookings cannot be changed.
Charge by
Hour Day Week
Day
Show bookings as
List Board Calendar
Show bookings as
List Board Calendar
Source
<div data-kit-role="form-group" data-kit-holds="help" id="segmented-charge">
  <fieldset>
    <legend id="segmented-charge-label">Charge by</legend>
    <div data-kit-role="segmented-control" id="segmented-charge-control">
      <label data-kit-region="segment"><input type="radio" name="charge" value="hour" aria-describedby="segmented-charge-help"><span data-kit-region="segment-name">Hour</span></label>
      <label data-kit-region="segment"><input type="radio" name="charge" value="day" checked aria-describedby="segmented-charge-help"><span data-kit-region="segment-name">Day</span></label>
      <label data-kit-region="segment"><input type="radio" name="charge" value="week" aria-describedby="segmented-charge-help"><span data-kit-region="segment-name">Week</span></label>
    </div>
  </fieldset>
  <output for="segmented-charge-control">Day</output>
  <span data-kit-region="help" id="segmented-charge-help">Applies to every booking of this room.</span>
</div>
<p class="specimen-case-line">Charge by while bookings cannot be changed.</p>
<div data-kit-role="form-group" id="segmented-charge-disabled">
  <fieldset>
    <legend id="segmented-charge-disabled-label">Charge by</legend>
    <div data-kit-role="segmented-control" id="segmented-charge-disabled-control">
      <label data-kit-region="segment"><input type="radio" name="charge-disabled" value="hour" disabled><span data-kit-region="segment-name">Hour</span></label>
      <label data-kit-region="segment"><input type="radio" name="charge-disabled" value="day" checked disabled><span data-kit-region="segment-name">Day</span></label>
      <label data-kit-region="segment"><input type="radio" name="charge-disabled" value="week" disabled><span data-kit-region="segment-name">Week</span></label>
    </div>
  </fieldset>
  <output for="segmented-charge-disabled-control">Day</output>
</div>
<div data-kit-role="form-group" id="segmented-view">
  <fieldset>
    <legend id="segmented-view-label">Show bookings as</legend>
    <div data-kit-role="segmented-control" id="segmented-view-control" data-kit-fit="pending">
      <label data-kit-region="segment"><input type="radio" name="view" value="list" checked><svg data-kit-icon="list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"/></svg><span data-kit-region="segment-name">List</span></label>
      <label data-kit-region="segment"><input type="radio" name="view" value="board"><svg data-kit-icon="kanban" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H40a8,8,0,0,0-8,8V208a16,16,0,0,0,16,16H88a16,16,0,0,0,16-16V160h48v16a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V56A8,8,0,0,0,216,48ZM88,208H48V128H88Zm0-96H48V64H88Zm64,32H104V64h48Zm56,32H168V128h40Zm0-64H168V64h40Z"/></svg><span data-kit-region="segment-name">Board</span></label>
      <label data-kit-region="segment"><input type="radio" name="view" value="calendar"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg><span data-kit-region="segment-name">Calendar</span></label>
    </div>
  </fieldset>
</div>
<div data-kit-role="form-group" id="segmented-view-narrow" style="inline-size: var(--kit-field-medium)">
  <fieldset>
    <legend id="segmented-view-narrow-label">Show bookings as</legend>
    <div data-kit-role="segmented-control" id="segmented-view-narrow-control" data-kit-fit="pending">
      <label data-kit-region="segment"><input type="radio" name="view-narrow" value="list"><svg data-kit-icon="list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"/></svg><span data-kit-region="segment-name">List</span></label>
      <label data-kit-region="segment"><input type="radio" name="view-narrow" value="board" checked><svg data-kit-icon="kanban" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H40a8,8,0,0,0-8,8V208a16,16,0,0,0,16,16H88a16,16,0,0,0,16-16V160h48v16a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V56A8,8,0,0,0,216,48ZM88,208H48V128H88Zm0-96H48V64H88Zm64,32H104V64h48Zm56,32H168V128h40Zm0-64H168V64h40Z"/></svg><span data-kit-region="segment-name">Board</span></label>
      <label data-kit-region="segment"><input type="radio" name="view-narrow" value="calendar"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg><span data-kit-region="segment-name">Calendar</span></label>
    </div>
  </fieldset>
</div>
Previous, Slider Next, Rating