SelectorΒΆ

/libs/granite/ui/components/foundation/form/selector

Selector provides a selection from a set of options and behaves similar to a set of Radio or Checkbox instances.

It extends Field component.

It has the following content structure:

granite:FormSelector
idstring

The id attribute.

relstring

The class attribute. This is used to indicate the semantic relationship of the component similar to rel attribute.

classstring

The class attribute.

titlestring
i18n

The title attribute.

typestring
  1. radio
  1. radio
  2. checkbox

The type of the selector. radio means it is single selection, just like HTML radios. checkbox means it is multiple selection, just like HTML checkboxes.

namestring

The name that identifies each option when submitting the form.

requiredboolean

Indicates if the field is mandatory to be filled.

validationstring
multiple

The name of the validator to be applied. E.g. foundation.jcr.name. See validation in Granite UI.

deleteHintboolean
  1. true

true to generate the SlingPostServlet @Delete hidden input based on the name.

ignoreDataboolean

If false, the checked status of each option is based on matching the form values by name and value properties. Otherwise, the form values are not matched, and the checked status is based on checked property specified.

items

The available options can be specified as content structure under items child resource.

The option has the following content structure:

granite:FormSelectorItem
classstring

The class attribute.

titlestring
i18n

The title attribute.

valuestring

The value of the option.

disabledboolean

Indicates if the option is in disabled state.

checkedboolean

Indicates if the option is checked. Providing checked property (either true or false) will imply ignoreData at the parent resource to be true.

textstring
i18n

The text of the option.

Example:

+ myselector
  - name = "browser"
  - sling:resourceType = "granite/ui/components/foundation/form/selector"
  + items
    + option1
      - value = "ie"
      - text = "Internet Explorer"
    + option2
      - value = "chrome"
      - text = "Chrome"
    + option3
      - value = "firefox"
      - text = "Firefox"