You are here

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()

File

templates/color-field-formatter-swatch-option.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Radio/checkbox button theme implementation of a color swatch formatter.
  5. *
  6. * Available variables:
  7. * - id: The option id.
  8. * - name: The option name.
  9. * - input_type: The input type; radio or checkbox.
  10. * - value: The color value.
  11. * - color: The color background.
  12. * - width: The width of the color swatch.
  13. * - height: The height of the color swatch.
  14. * - shape: The shape of the color swatch.
  15. *
  16. * @see template_preprocess()
  17. * @see template_preprocess_color_field_formatter_swatch()
  18. *
  19. * @ingroup themeable
  20. */
  21. #}
  22. {{ attach_library('color_field/color-field-formatter-swatch-options') }}
  23. <div class="color_field__swatch">
  24. <input type="{{ input_type }}" id="{{ id }}" name="{{ name }}" value="{{ value }}">
  25. <label for="{{ id }}" style="width: {{ width }}; height: {{ height }};">
  26. <span class="color_field__swatch--{{ shape }}" style="background-color: {{ color }};"></span>
  27. </label>
  28. </div>