Color fields inputs and links

Color fields

Checkbox single color

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  title: "Modrá",
  full_name: "color-checkbox",
  colors: [
    "#3F60E3"
  ]
}} %}

                  <label class="f-color u-posr u-rounded-full --lg --checkbox" style="--background-color:conic-gradient(
              #3F60E3
    0deg
    355deg
    )">
      <input class="f-color__input" type="checkbox" name=color-checkbox title="Modrá"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>

Radio single color small

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  title: "Šedá",
  name: "color-radio",
  type: "radio",
  size: "sm",
  colors: [
    "#B0B2D4"
  ]
}} %}

              <label class="f-color u-posr u-rounded-full --sm --radio" style="--background-color:conic-gradient(
              #B0B2D4
    0deg
    355deg
    )">
      <input class="f-color__input" type="radio" title="Šedá"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>

Link single color checked

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  title: "Modrá",
  url: "#",
  checked: true,
  colors: [
    "#3F60E3"
  ]
}} %}

              <div class="f-color u-posr u-rounded-full --lg --checkbox   --link --checked" style="--background-color:conic-gradient(
              #3F60E3
    0deg
    355deg
    )">
      <a class="f-color__input" href='#' title="Modrá"></a>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</div>

Link multiple colors

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  title: "Modro-šedá",
  url: "#",
  colors: [
    "#3F60E3",
    "#B0B2D4",
    "#FFFFFF",
  ]
}} %}

              <div class="f-color u-posr u-rounded-full --lg --checkbox   --link" style="--background-color:conic-gradient(
              #3F60E3
    0deg
    115deg,
              #B0B2D4
    120deg
    235deg,
              #FFFFFF
    240deg
    355deg
    )">
      <a class="f-color__input" href='#' title="Modro-šedá"></a>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</div>

Checkbox checked

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  title: "Modrá",
  full_name: "color-checkbox",
  checked: true,
  colors: [
    "#3F60E3"
  ]
}} %}

                      <label class="f-color u-posr u-rounded-full --lg --checkbox    --checked" style="--background-color:conic-gradient(
              #3F60E3
    0deg
    355deg
    )">
      <input class="f-color__input" type="checkbox" checked="checked" name=color-checkbox title="Modrá"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>

Checkbox disabled

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  title: "Modrá",
  full_name: "color-checkbox",
  disabled: true,
  colors: [
    "#3F60E3"
  ]
}} %}

                      <label class="f-color u-posr u-rounded-full --lg --checkbox --disabled" style="--background-color:conic-gradient(
              #3F60E3
    0deg
    355deg
    )">
      <input class="f-color__input --disabled" type="checkbox" disabled name=color-checkbox title="Modrá"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>

Readonly

        {% include "@Components/fields/color-field/color-field.twig" with {props: {
  mode: "readonly",
  title: "Modrá",
  full_name: "color-checkbox",
  colors: [
    "#3F60E3"
  ]
}} %}

                  <label class="f-color u-posr u-rounded-full --lg --checkbox  --readonly" style="--background-color:conic-gradient(
              #3F60E3
    0deg
    355deg
    )">
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>

Utility color fields

        {% include "@Components/groups/colors-group/colors-group.twig" with {props: {
  type: "radio",
  full_name: "color-checkbox",
  items: [
    {
      title: "White",
      utility_color: "white",
      value: "white"
    },
    {
      title: "Secondary",
      utility_color: "secondary-400",
      value: "secondary-400",
    },
    {
      title: "Pink",
      utility_color: "support-pink-400",
      value: "support-pink-400",
    },
    {
      title: "Orange",
      utility_color: "support-orange-400",
      value: "support-orange-400",
    },
    {
      title: "Blue",
      utility_color: "support-blue-400",
      value: "support-blue-400"
    }
  ]
}} %}

          <div class="g-colors d-flex flex-wrap gap-2">
              <label class="f-color u-posr u-rounded-full --lg --radio     --has-bg-class u-bg-white" style="--background-color:conic-gradient(
    )">
      <input class="f-color__input" type="radio" value="white" name=color-checkbox title="White"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
              <label class="f-color u-posr u-rounded-full --lg --radio     --has-bg-class u-bg-secondary-400" style="--background-color:conic-gradient(
    )">
      <input class="f-color__input" type="radio" value="secondary-400" name=color-checkbox title="Secondary"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
              <label class="f-color u-posr u-rounded-full --lg --radio     --has-bg-class u-bg-support-pink-400" style="--background-color:conic-gradient(
    )">
      <input class="f-color__input" type="radio" value="support-pink-400" name=color-checkbox title="Pink"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
              <label class="f-color u-posr u-rounded-full --lg --radio     --has-bg-class u-bg-support-orange-400" style="--background-color:conic-gradient(
    )">
      <input class="f-color__input" type="radio" value="support-orange-400" name=color-checkbox title="Orange"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
              <label class="f-color u-posr u-rounded-full --lg --radio     --has-bg-class u-bg-support-blue-400" style="--background-color:conic-gradient(
    )">
      <input class="f-color__input" type="radio" value="support-blue-400" name=color-checkbox title="Blue"></input>
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
  </div>