Site docs are currently being updated 🚧 Thank you for your patience! 🙏

WPGraphQL Logo

Color Picker

ACF
Last Upated: Thursday, Feb 1, 2024

color_picker

The Color Picker field type is native to ACF (free) and provides users with the option to select a color using a Color Picker.

Resolve Type

Fields of the "color_picker" field type resolve to "String" in the GraphQL Schema.

Field Settings

Below you will find information about how various ACF field settings can impact how the field will map to the GraphQL Schema and/or modify resolution of the field when queried.

Field Configuration

<?php
add_action( 'acf/include_fields', function() {
  if ( ! function_exists( 'acf_add_local_field_group' ) ) {
      return;
  }
  acf_add_local_field_group(
    [
      {
        "key": "my_field_group_",
        "title": "My Field Group with color_picker",
        "show_in_graphql": 1,
        "graphql_field_name": "myFieldGroupWithColorPicker",
        "map_graphql_types_from_location_rules": 0,
        "graphql_types": [
          "Page"
        ],
        "fields": [
          {
            "key": "my_field_",
            "label": "My Field",
            "name": "my_field",
            "type": "color_picker",
            "show_in_graphql": 1,
            "graphql_field_name": "myFieldWithColorPicker"
          }
        ],
        "location": [
          [
            {
              "param": "post_type",
              "operator": "==",
              "value": "page"
            }
          ]
        ]
      }
    ]
  );
});

Querying the Color Picker Field

Next
Countries