Colour picker

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.

Cannot be changed

Source

<div data-kit-role="form-group" id="colour-label">
  <fieldset>
    <legend id="colour-label-label">Label colour</legend>
    <div data-kit-role="colour-picker" data-kit-colour='{"locale":"en-GB"}' id="colour-label-control">
      <label data-kit-region="swatch" style="--kit-swatch: #c0392b"><input type="radio" name="label_colour" value="#c0392b" aria-label="Red"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #d35400"><input type="radio" name="label_colour" value="#d35400" aria-label="Orange"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #f1c40f"><input type="radio" name="label_colour" value="#f1c40f" aria-label="Yellow"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #27ae60"><input type="radio" name="label_colour" value="#27ae60" aria-label="Green"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #2980b9"><input type="radio" name="label_colour" value="#2980b9" aria-label="Blue" checked></label>
      <label data-kit-region="swatch" style="--kit-swatch: #8e44ad"><input type="radio" name="label_colour" value="#8e44ad" aria-label="Purple"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #7f8c8d"><input type="radio" name="label_colour" value="#7f8c8d" aria-label="Grey"></label>
      <label data-kit-region="swatch" hidden><input type="radio" name="label_colour" value=""></label>
      <button type="button" data-kit-role="icon-action" data-kit-region="custom" id="colour-label-control-custom" aria-label="Custom" aria-expanded="false" aria-controls="colour-label-control-custom-colour"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button>
      <div id="colour-label-control-custom-colour" data-kit-role="popover" data-kit-region="custom-colour" popover="manual"></div>
    </div>
  </fieldset>
  <output for="colour-label-control">Blue</output>
</div>
<div data-kit-role="form-group" id="colour-calendar">
  <fieldset>
    <legend id="colour-calendar-label">Calendar colour</legend>
    <div data-kit-role="colour-picker" data-kit-colour='{"locale":"en-GB"}' id="colour-calendar-control">
      <label data-kit-region="swatch" style="--kit-swatch: #c0392b"><input type="radio" name="calendar_colour" value="#c0392b" aria-label="Red"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #d35400"><input type="radio" name="calendar_colour" value="#d35400" aria-label="Orange"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #f1c40f"><input type="radio" name="calendar_colour" value="#f1c40f" aria-label="Yellow"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #27ae60"><input type="radio" name="calendar_colour" value="#27ae60" aria-label="Green"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #2980b9"><input type="radio" name="calendar_colour" value="#2980b9" aria-label="Blue"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #8e44ad"><input type="radio" name="calendar_colour" value="#8e44ad" aria-label="Purple"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #7f8c8d"><input type="radio" name="calendar_colour" value="#7f8c8d" aria-label="Grey"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #483d8b"><input type="radio" name="calendar_colour" value="#483d8b" aria-label="Dark slate blue, #483d8b" checked></label>
      <button type="button" data-kit-role="icon-action" data-kit-region="custom" id="colour-calendar-control-custom" aria-label="Custom" aria-expanded="false" aria-controls="colour-calendar-control-custom-colour"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button>
      <div id="colour-calendar-control-custom-colour" data-kit-role="popover" data-kit-region="custom-colour" popover="manual"></div>
    </div>
  </fieldset>
  <output for="colour-calendar-control">Dark slate blue</output>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="colour-calendar-disabled">
<fieldset>
  <legend id="colour-calendar-disabled-label">Calendar colour</legend>
  <div data-kit-role="colour-picker" data-kit-colour='{"locale":"en-GB"}' id="colour-calendar-disabled-control">
    <label data-kit-region="swatch" style="--kit-swatch: #c0392b"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#c0392b" aria-label="Red"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #d35400"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#d35400" aria-label="Orange"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #f1c40f"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#f1c40f" aria-label="Yellow"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #27ae60"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#27ae60" aria-label="Green"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #2980b9"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#2980b9" aria-label="Blue"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #8e44ad"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#8e44ad" aria-label="Purple"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #7f8c8d"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#7f8c8d" aria-label="Grey"></label>
    <label data-kit-region="swatch" style="--kit-swatch: #483d8b"><input disabled type="radio" aria-describedby="colour-calendar-disabled-help" name="calendar_colour_locked" value="#483d8b" aria-label="Dark slate blue, #483d8b" checked></label>
    <button disabled type="button" data-kit-role="icon-action" data-kit-region="custom" id="colour-calendar-disabled-control-custom" aria-label="Custom" aria-expanded="false" aria-controls="colour-calendar-disabled-control-custom-colour"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button>
    <div id="colour-calendar-disabled-control-custom-colour" data-kit-role="popover" data-kit-region="custom-colour" popover="manual"></div>
  </div>
</fieldset>
<output for="colour-calendar-disabled-control">Dark slate blue</output>
<span data-kit-region="help" id="colour-calendar-disabled-help">Only the owner can change this.</span>
</div>

Colour picker, open

Show it open

Source

<div data-kit-role="form-group" id="colour-tag">
  <fieldset>
    <legend id="colour-tag-label">Tag colour</legend>
    <div data-kit-role="colour-picker" data-kit-colour='{"locale":"en-GB"}' id="colour-tag-control">
      <label data-kit-region="swatch" style="--kit-swatch: #c0392b"><input type="radio" name="tag_colour" value="#c0392b" aria-label="Red"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #d35400"><input type="radio" name="tag_colour" value="#d35400" aria-label="Orange"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #f1c40f"><input type="radio" name="tag_colour" value="#f1c40f" aria-label="Yellow"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #27ae60"><input type="radio" name="tag_colour" value="#27ae60" aria-label="Green"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #2980b9"><input type="radio" name="tag_colour" value="#2980b9" aria-label="Blue"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #8e44ad"><input type="radio" name="tag_colour" value="#8e44ad" aria-label="Purple"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #7f8c8d"><input type="radio" name="tag_colour" value="#7f8c8d" aria-label="Grey"></label>
      <label data-kit-region="swatch" style="--kit-swatch: #483d8b"><input type="radio" name="tag_colour" value="#483d8b" aria-label="Dark slate blue, #483d8b" checked></label>
      <button type="button" data-kit-role="icon-action" data-kit-region="custom" id="colour-tag-control-custom" aria-label="Custom" aria-expanded="false" aria-controls="colour-tag-control-custom-colour"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button>
      <div id="colour-tag-control-custom-colour" data-kit-role="popover" data-kit-region="custom-colour" popover="manual"></div>
    </div>
  </fieldset>
  <output for="colour-tag-control">Dark slate blue</output>
</div>

Previous, Rating Next, One-time code