color-field-formatter-swatch-option.html.twig in Color Field 8.2

Radio/checkbox button theme implementation of a color swatch formatter.

Available variables:

• id: The option id.
• name: The option name.
• input_type: The input type; radio or checkbox.
• value: The color value.
• color: The color background.
• width: The width of the color swatch.
• height: The height of the color swatch.
• shape: The shape of the color swatch.

See also

template_preprocess()

template_preprocess_color_field_formatter_swatch()

1 theme call to color-field-formatter-swatch-option.html.twig

ColorFieldFormatterSwatchOptions::viewElements in src/Plugin/Field/FieldFormatter/ColorFieldFormatterSwatchOptions.php

Builds a renderable array for a field value.

File

templates/color-field-formatter-swatch-option.html.twig

{#
/**
 * @file
 * Radio/checkbox button theme implementation of a color swatch formatter.
 *
 * Available variables:
 * - id: The option id.
 * - name: The option name.
 * - input_type: The input type; radio or checkbox.
 * - value: The color value.
 * - color: The color background.
 * - width: The width of the color swatch.
 * - height: The height of the color swatch.
 * - shape: The shape of the color swatch.
 *
 * @see template_preprocess()
 * @see template_preprocess_color_field_formatter_swatch()
 *
 * @ingroup themeable
 */
#}

{{ attach_library('color_field/color-field-formatter-swatch-options') }}
<div class="color_field__swatch">
  <input type="{{ input_type }}" id="{{ id }}" name="{{ name }}" value="{{ value }}">
  <label for="{{ id }}" style="width: {{ width }}; height: {{ height }};">
    <span class="color_field__swatch--{{ shape }}" style="background-color: {{ color }};"></span>
  </label>
</div>