Form API Element

Example code for adding a Style Selector element with the default display to your own form:

$form['bg_style'] = [
  '#title' => t('Background Style'),
  '#type' => 'style_selector',
  '#style_type' => 'css_class',
  '#options' => [
    'bgstyle--light bgstyle--white' => t('White'),
    'bgstyle--light bgstyle--white-blur' => t('White Glass (Blur) Overlay'),
    'bgstyle--light bgstyle--lime' => t('Lime'),
    'bgstyle--dark bgstyle--overlay' => t('Semi-transparent Black'),
    'bgstyle--dark bgstyle--sunrise' => t('Sunrise'),
  ],
];

UI Options

Form elements can be customized using several custom element properties. These are documented in the element plugin class (src/Element/StyleSelector.php) and reproduced here. See the Widget page for details on how each option affects the element display.

/* 
 * Custom form element properties:
 * - #style_type: (string) Whether the options are a list of CSS classes or
 *   CSS colors. Possible values:
 *   - css_class (default)
 *   - css_color
 * - #options: (array) Array of value => label pairs that will be transformed
 *   into available options for the element.
 * - #ui_variant: (array) The style variant of the widget/form element with
 *   additional settings as required. Example:
 *   - 'compact' => [
 *        'type' => 'round',
 *        'size' => 'large',
 *     ]
 * - #multiple: (boolean) Are multiple selections allowed. Defealts to FALSE.
 * - #ui_settings: (array) Option key, boolean value pair to set addtional
 *   display options for element/widget.
 *   Possible values (default):
 *   - 'alpha_grid' (TRUE): Show the alpha grid background image?
 *   - 'check_icon' (TRUE): Show the icon for checked selection?
 *   - 'empty-icon' (TRUE): Show the no-symbol in options with value 'none'?
 *   - 'text-icon' (FALSE): Show the 'T' icon to demo forground color?
 *   Example:
 *   - '#ui_settings' => [
 *       'alpha_grid' => FALSE,
 *       'Text-icon' => TRUE,
 *     ]
 * - #extra_classes: (string) Space-separated list of one or more classes to
 *   add to the ssui container element. The prefix 'ssui--' will be added to
 *   each supplied value.
 * - #empty_option: String to display as the label for none/empty options.
 *   Default is 'None'.
 */