Tree examples

Show params

Params

params:
- name: type
  type: string
  required: false
  description: Type of input control to render. Admitted values are `checkbox` and `radio` or not set. Defaults to `radio`.
- name: searchbar
  type: component
  required: false
  description: A searchbar component to filter the items. Inherits all the searchbar component params.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
- name: fieldset
  type: object
  required: false
  description: Options for the fieldset component (e.g. legend).
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component (e.g. text).
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item.
- name: name
  type: string
  required: true
  description: Name attribute for all checkbox/radio items.
- name: heading
  type: object
  required: true
  description: Options for the heading
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the heading.
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: items
  type: array
  required: true
  description: Array of tree items objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each tree item label. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each tree item label. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
  - name: name
    type: string
    required: true
    description: Specific name for the checkbox/radio item. If omitted, then component global `name` string will be applied.
  - name: value
    type: string
    required: true
    description: Value for the checkbox/radio input.
  - name: label
    type: object
    required: false
    description: Provide attributes and classes to each checkbox/radio item label.
    isComponent: true
  - name: hint
    type: object
    required: false
    description: Provide hint to each checkbox/radio item.
    isComponent: true
  - name: checked
    type: boolean
    required: false
    description: If true, checkbox/radio will be checked.
  - name: isIndeterminate
    type: boolean
    required: false
    description: If true, the checkbox will have an additional indeterminate state to show a partial true. Only for checkbox item.
  - name: indeterminateChecked
    type: boolean
    required: false
    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value. Only for checkbox item.
  - name: disabled
    type: boolean
    required: false
    description: If true, tree will be disabled.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
  - name: expanded
    type: boolean
    required: false
    description: If true, tree sub will be expanded.
  - name: sub
    type: boolean
    required: false
    description: If true, content provided will be revealed when the item is expanded.
  - name: sub.classes
    type: string
    required: false
    description: Classes to add to the sub container.
  - name: sub.attributes
    type: string
    required: false
    description: HTML attributes (for example data attributes) to add to the sub container.
  - name: sub.items
    type: array
    required: false
    description: Provide subitems for the sub reveal. Each items have same params as this item.
- name: classes
  type: string
  required: false
  description: Classes to add to the tree container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the tree container.

accessibilityCriteria: |
  ## sub reveals
  Must:
  - be visible as static content if JavaScript is unavailable or fails
  - be hidden if JavaScript is available and is collapsed
  - indicate if content is expanded or collapsed
  - indicate that there is collapsed content to interact with

  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

default

Selecciona organismo
Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "default",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2"
    },
    {
      "text": "Item 3",
      "value": "item-2"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="default-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-0-input" name="default" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="default-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="default-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-1-input" name="default" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="default-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="default-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-2-input" name="default" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="default-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

type checkbox

Selecciona organismo
Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "type-checkbox",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2"
    },
    {
      "text": "Item 3",
      "value": "item-2"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="type-checkbox-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="type-checkbox-0-input" name="type-checkbox" type="checkbox" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="type-checkbox-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="type-checkbox-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="type-checkbox-1-input" name="type-checkbox" type="checkbox" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="type-checkbox-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="type-checkbox-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="type-checkbox-2-input" name="type-checkbox" type="checkbox" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="type-checkbox-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with hint and error

Selecciona organismo

Selecciona el organismo al que perteneces.

Error: Error: No tienes permiso para seleccionar ese organismo.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-hint-and-error",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "errorMessage": {
    "text": "Error: No tienes permiso para seleccionar ese organismo."
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2",
      "checked": true
    },
    {
      "text": "Item 3",
      "value": "item-2"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="with-hint-and-error-hint with-hint-and-error-error" aria-errormessage="with-hint-and-error-error">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-hint-and-error-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
    <!-- error-message -->
  <p id="with-hint-and-error-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: No tienes permiso para seleccionar ese organismo.
  </p>
  <!-- /error-message -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-hint-and-error-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hint-and-error-0-input" name="with-hint-and-error" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hint-and-error-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-hint-and-error-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: true }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hint-and-error-1-input" name="with-hint-and-error" type="radio" value="item-2" checked>
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hint-and-error-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-hint-and-error-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hint-and-error-2-input" name="with-hint-and-error" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hint-and-error-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with disabled item

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-disabled-item",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2"
    },
    {
      "text": "Item 3",
      "value": "item-3",
      "disabled": true
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-disabled-item-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-disabled-item-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-disabled-item-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-disabled-item-0-input" name="with-disabled-item" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-disabled-item-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-disabled-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-disabled-item-1-input" name="with-disabled-item" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-disabled-item-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-disabled-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" disabled="disabled" aria-disabled="true" tabindex="-1">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-disabled-item-2-input" name="with-disabled-item" type="radio" value="item-3" disabled>
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-disabled-item-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with active item

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-active-item",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2",
      "active": true
    },
    {
      "text": "Item 3",
      "value": "item-3"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-active-item-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-active-item-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-active-item-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-active-item-0-input" name="with-active-item" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-active-item-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-active-item-1" class="c-tree__item ml-4 focus:outline-none font-bold" role="treeitem" data-module="c-tree__item" aria-current="page">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-active-item-1-input" name="with-active-item" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-active-item-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-active-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-active-item-2-input" name="with-active-item" type="radio" value="item-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-active-item-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with hints on items

Selecciona organismo
  • Hint on item

  • Hint on item

  • Hint on item

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-hints-on-items",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1",
      "hint": {
        "text": "Hint on item"
      }
    },
    {
      "text": "Item 2",
      "value": "item-2",
      "hint": {
        "text": "Hint on item"
      }
    },
    {
      "text": "Item 3",
      "value": "item-2",
      "hint": {
        "text": "Hint on item"
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-hints-on-items-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hints-on-items-0-input" name="with-hints-on-items" type="radio" value="item-1" aria-describedby="with-hints-on-items-0-item-hint">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hints-on-items-0-input">Item 1</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="with-hints-on-items-0-item-hint" class="block text-neutral-dark">
        Hint on item
      </p>
      <!-- /hint -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-hints-on-items-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hints-on-items-1-input" name="with-hints-on-items" type="radio" value="item-2" aria-describedby="with-hints-on-items-1-item-hint">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hints-on-items-1-input">Item 2</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="with-hints-on-items-1-item-hint" class="block text-neutral-dark">
        Hint on item
      </p>
      <!-- /hint -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-hints-on-items-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hints-on-items-2-input" name="with-hints-on-items" type="radio" value="item-2" aria-describedby="with-hints-on-items-2-item-hint">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hints-on-items-2-input">Item 3</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="with-hints-on-items-2-item-hint" class="block text-neutral-dark">
        Hint on item
      </p>
      <!-- /hint -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with very long option text

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-very-long-option-text",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
      "value": "item-1"
    },
    {
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
      "value": "item-2"
    },
    {
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
      "value": "item-3"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-very-long-option-text-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-very-long-option-text-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-very-long-option-text-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-very-long-option-text-0-input" name="with-very-long-option-text" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-very-long-option-text-0-input">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-very-long-option-text-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-very-long-option-text-1-input" name="with-very-long-option-text" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-very-long-option-text-1-input">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-very-long-option-text-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-very-long-option-text-2-input" name="with-very-long-option-text" type="radio" value="item-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-very-long-option-text-2-input">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with legend as page heading

Selecciona organismo

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-legend-as-page-heading",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo",
      "classes": "c-h2",
      "isPageHeading": true
    },
    "headingLevel": 2
  },
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2"
    },
    {
      "text": "Item 3",
      "value": "item-2"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="c-h2">
      <h2>Selecciona organismo</h2>
  </legend>
      <ul class="c-tree" role="tree" data-module="c-tree">
        <li id="with-legend-as-page-heading-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-legend-as-page-heading-0-input" name="with-legend-as-page-heading" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-legend-as-page-heading-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-legend-as-page-heading-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-legend-as-page-heading-1-input" name="with-legend-as-page-heading" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-legend-as-page-heading-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-legend-as-page-heading-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-legend-as-page-heading-2-input" name="with-legend-as-page-heading" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-legend-as-page-heading-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

without fieldset

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "without-fieldset",
  "items": [
    {
      "text": "Item 1",
      "value": "item-1"
    },
    {
      "text": "Item 2",
      "value": "item-2"
    },
    {
      "text": "Item 3",
      "value": "item-2"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
    <ul class="c-tree" role="tree" data-module="c-tree">
        <li id="without-fieldset-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-0-input" name="without-fieldset" type="radio" value="item-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="without-fieldset-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="without-fieldset-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-1-input" name="without-fieldset" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="without-fieldset-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="without-fieldset-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-2-input" name="without-fieldset" type="radio" value="item-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="without-fieldset-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</div>
<!-- /tree -->

with all parent items

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-all-parent-items",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "parent-example",
  "items": [
    {
      "text": "Item 1",
      "id": "parent-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "parent-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "parent-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-3"
        }
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="parent-example-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="parent-example-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="parent-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="parent-example-item-1-input" name="with-all-parent-items" type="checkbox" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="parent-example-item-1-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="parent-example-item-1">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-1-0-input" name="with-all-parent-items" type="checkbox" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-1-1-input" name="with-all-parent-items" type="checkbox" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-1-2-input" name="with-all-parent-items" type="checkbox" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="parent-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="parent-example-item-2-input" name="with-all-parent-items" type="checkbox" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="parent-example-item-2-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="parent-example-item-2">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-2-0-input" name="with-all-parent-items" type="checkbox" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-2-1-input" name="with-all-parent-items" type="checkbox" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-2-2-input" name="with-all-parent-items" type="checkbox" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="parent-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="parent-example-item-3-input" name="with-all-parent-items" type="checkbox" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="parent-example-item-3-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="parent-example-item-3">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-3-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-3-0-input" name="with-all-parent-items" type="checkbox" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-3-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-3-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-3-1-input" name="with-all-parent-items" type="checkbox" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-3-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-3-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-3-2-input" name="with-all-parent-items" type="checkbox" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-3-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with a parent item opened

expanded: true

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-a-parent-item-opened",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-item",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-item-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-item-item-2",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-item-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-3"
        }
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="tree-item-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="tree-item-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="tree-item-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-item-1-input" name="with-a-parent-item-opened" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-item-1-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="tree-item-item-1">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-1-0-input" name="with-a-parent-item-opened" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-1-1-input" name="with-a-parent-item-opened" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-1-2-input" name="with-a-parent-item-opened" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="tree-item-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-item-2-input" name="with-a-parent-item-opened" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-item-2-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="tree-item-item-2">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-2-0-input" name="with-a-parent-item-opened" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-2-1-input" name="with-a-parent-item-opened" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-2-2-input" name="with-a-parent-item-opened" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="tree-item-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-item-3-input" name="with-a-parent-item-opened" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-item-3-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="tree-item-item-3">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-3-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-3-0-input" name="with-a-parent-item-opened" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-3-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-3-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-3-1-input" name="with-a-parent-item-opened" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-3-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-3-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-3-2-input" name="with-a-parent-item-opened" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-3-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with many depth levels

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-many-depth-levels",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-item-nodes",
  "items": [
    {
      "text": "Item 1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 3",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 2",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 3",
            "expanded": true,
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3",
                  "expanded": true,
                  "sub": {
                    "items": [
                      {
                        "text": "Subitem 1",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 2",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 3",
                        "expanded": true,
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="tree-item-nodes-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="tree-item-nodes-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="tree-item-nodes-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-0-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-0-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-0-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-0-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-0-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-0-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-0-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-0-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="tree-item-nodes-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-1-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-1-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="tree-item-nodes-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-2-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-2-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-2-0-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-0-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-0-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-0-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-0-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-0-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-0-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-2-1-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-2-2-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-2-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-2-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-2-2-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-2-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-2-2-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-2-2-2-0-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-2-2-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-0-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-2-2-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-2-2-2-1-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-2-2-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-2-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-2-2-2-2-input" name="with-many-depth-levels" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-2-2-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-2-2-2-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

            </li>
     </ul>

            </li>
     </ul>

            </li>
     </ul>

        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

indeterminate

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "indeterminate",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "indeterminate-example",
  "items": [
    {
      "text": "Item 1",
      "id": "indeterminate-example-item-1",
      "isIndeterminate": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "indeterminate-example-item-2",
      "isIndeterminate": true,
      "indeterminateChecked": true,
      "checked": false,
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "checked": true
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "indeterminate-example-item-3",
      "isIndeterminate": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-3"
        }
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="indeterminate-example-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="indeterminate-example-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="indeterminate-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-example-item-1-input" name="indeterminate" type="checkbox" value="" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="indeterminate-example-item-1-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="indeterminate-example-item-1">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-1-0-input" name="indeterminate" type="checkbox" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-1-1-input" name="indeterminate" type="checkbox" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-1-2-input" name="indeterminate" type="checkbox" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="indeterminate-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-example-item-2-input" name="indeterminate" type="checkbox" value="" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="indeterminate-example-item-2-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="indeterminate-example-item-2">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-2-0-input" name="indeterminate" type="checkbox" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: true }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-2-1-input" name="indeterminate" type="checkbox" value="subitem-2" checked>
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-2-2-input" name="indeterminate" type="checkbox" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="indeterminate-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-example-item-3-input" name="indeterminate" type="checkbox" value="" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="indeterminate-example-item-3-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="indeterminate-example-item-3">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-3-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-3-0-input" name="indeterminate" type="checkbox" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-3-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-3-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-3-1-input" name="indeterminate" type="checkbox" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-3-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-3-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-3-2-input" name="indeterminate" type="checkbox" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-3-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with searchbar

Selecciona organismo
Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-searchbar",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo"
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-3"
        }
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="with-searchbar-searchbar">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="with-searchbar-searchbar" name="with-searchbar-searchbar" type="search" placeholder="Buscar organismo">
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
</div>
<!-- /searchbar -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-searchbar-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-item-1-input" name="with-searchbar" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-item-1-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="with-searchbar-item-1">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-1-0-input" name="with-searchbar" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-1-1-input" name="with-searchbar" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-1-2-input" name="with-searchbar" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="with-searchbar-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-item-2-input" name="with-searchbar" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-item-2-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="with-searchbar-item-2">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-2-0-input" name="with-searchbar" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-2-1-input" name="with-searchbar" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-2-2-input" name="with-searchbar" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="with-searchbar-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-item-3-input" name="with-searchbar" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-item-3-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="with-searchbar-item-3">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-3-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-3-0-input" name="with-searchbar" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-3-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-3-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-3-1-input" name="with-searchbar" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-3-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-3-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-3-2-input" name="with-searchbar" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-3-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with searchbar error

Selecciona organismo

Error: Error: Introduce al menos un carácter

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-searchbar-error",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-error-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo",
    "errorMessage": {
      "text": "Error: Introduce al menos un carácter",
      "classes": "mt-xs"
    }
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-error-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-error-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-error-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-3"
        }
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="with-searchbar-error-searchbar">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full border-alert-base ring-2 ring-alert-base " id="with-searchbar-error-searchbar" name="with-searchbar-error-searchbar" type="search" aria-describedby="with-searchbar-error-searchbar-error" aria-errormessage="with-searchbar-error-searchbar-error" aria-invalid="true" placeholder="Buscar organismo">
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
  <!-- error-message -->
  <p id="with-searchbar-error-searchbar-error" class="block font-semibold text-alert-base mt-xs">
  <span class="sr-only">Error:</span> Error: Introduce al menos un carácter
  </p>
  <!-- /error-message -->
</div>
<!-- /searchbar -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="with-searchbar-error-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-error-item-1-input" name="with-searchbar-error" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-error-item-1-input">Item 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="with-searchbar-error-item-1">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-1-0-input" name="with-searchbar-error" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-1-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-1-1-input" name="with-searchbar-error" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-1-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-1-2-input" name="with-searchbar-error" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-1-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="with-searchbar-error-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-error-item-2-input" name="with-searchbar-error" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-error-item-2-input">Item 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="with-searchbar-error-item-2">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-2-0-input" name="with-searchbar-error" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-2-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-2-1-input" name="with-searchbar-error" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-2-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-2-2-input" name="with-searchbar-error" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-2-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="with-searchbar-error-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-error-item-3-input" name="with-searchbar-error" type="radio" value="">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-error-item-3-input">Item 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="with-searchbar-error-item-3">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-3-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-3-0-input" name="with-searchbar-error" type="radio" value="subitem-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-3-0-input">Subitem 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-3-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-3-1-input" name="with-searchbar-error" type="radio" value="subitem-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-3-1-input">Subitem 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-3-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-3-2-input" name="with-searchbar-error" type="radio" value="subitem-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-3-2-input">Subitem 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

small

with classes applied

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-classes-applied",
  "classes": "c-tree--sm mt-sm",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Option 1",
      "value": "option-1",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Option 2",
      "value": "option-2",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      },
      "expanded": true,
      "id": "classes-1",
      "sub": {
        "items": [
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            }
          },
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            },
            "active": true
          },
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "classes-1"
        }
      }
    },
    {
      "text": "Option 3",
      "value": "option-3",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Option 4",
      "value": "option-4",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Option 5",
      "value": "option-5",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-classes-applied-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-classes-applied-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree c-tree--sm mt-sm" role="tree" data-module="c-tree">
        <li id="with-classes-applied-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-0-input" name="with-classes-applied" type="radio" value="option-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="with-classes-applied-0-input">Option 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="classes-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left -mt-xs pt-1">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-1-input" name="with-classes-applied" type="radio" value="option-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="classes-1-input">Option 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" aria-labelledby="classes-1">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-classes-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block -mt-xs pt-1">
                      <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-classes-1-0-input" name="with-classes-applied" type="radio" value="item">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="sub-classes-1-0-input">Item</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-classes-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block -mt-xs pt-1 font-bold" aria-current="page">
                    <div class="font-bold">
                        <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-classes-1-1-input" name="with-classes-applied" type="radio" value="item">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="sub-classes-1-1-input">Item</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                    </div>
                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-classes-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block -mt-xs pt-1">
                      <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-classes-1-2-input" name="with-classes-applied" type="radio" value="item">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="sub-classes-1-2-input">Item</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="with-classes-applied-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-2-input" name="with-classes-applied" type="radio" value="option-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="with-classes-applied-2-input">Option 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-classes-applied-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-3-input" name="with-classes-applied" type="radio" value="option-4">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="with-classes-applied-3-input">Option 4</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-classes-applied-4" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class=" -mt-xs pt-1">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-4-input" name="with-classes-applied" type="radio" value="option-5">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block text-sm -mt-1" for="with-classes-applied-4-input">Option 5</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with idPrefix

See code to display the idPrefix applied

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-idprefix",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-menu-item",
  "items": [
    {
      "text": "Option 1",
      "value": "option-1"
    },
    {
      "text": "Option 2",
      "value": "option-2"
    },
    {
      "text": "Option 3",
      "value": "option-3"
    },
    {
      "text": "Option 4",
      "value": "option-4"
    },
    {
      "text": "Option 5",
      "value": "option-5"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="tree-menu-item-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="tree-menu-item-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="tree-menu-item-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-menu-item-0-input" name="with-idprefix" type="radio" value="option-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-menu-item-0-input">Option 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="tree-menu-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-menu-item-1-input" name="with-idprefix" type="radio" value="option-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-menu-item-1-input">Option 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="tree-menu-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-menu-item-2-input" name="with-idprefix" type="radio" value="option-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-menu-item-2-input">Option 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="tree-menu-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-menu-item-3-input" name="with-idprefix" type="radio" value="option-4">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-menu-item-3-input">Option 4</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="tree-menu-item-4" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-menu-item-4-input" name="with-idprefix" type="radio" value="option-5">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-menu-item-4-input">Option 5</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with individual ids

See code to display the ids applied

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-individual-ids",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Option 1",
      "value": "option-1",
      "id": "option-A"
    },
    {
      "text": "Option 2",
      "value": "option-2",
      "id": "option-B"
    },
    {
      "text": "Option 3",
      "value": "option-3",
      "id": "option-C"
    },
    {
      "text": "Option 4",
      "value": "option-4",
      "id": "option-D"
    },
    {
      "text": "Option 5",
      "value": "option-5",
      "id": "option-E"
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-individual-ids-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-individual-ids-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" data-module="c-tree">
        <li id="option-A" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-A-input" name="with-individual-ids" type="radio" value="option-1">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-A-input">Option 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="option-B" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-B-input" name="with-individual-ids" type="radio" value="option-2">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-B-input">Option 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="option-C" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-C-input" name="with-individual-ids" type="radio" value="option-3">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-C-input">Option 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="option-D" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-D-input" name="with-individual-ids" type="radio" value="option-4">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-D-input">Option 4</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="option-E" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-E-input" name="with-individual-ids" type="radio" value="option-5">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-E-input">Option 5</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->

with attributes

See code to display the attributes applied

Selecciona organismo

Selecciona el organismo al que perteneces.

Show code

Macro

{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "with-attributes",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "attributes": {
    "id": "tree-id-example"
  },
  "items": [
    {
      "text": "Option 1",
      "value": "option-1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Option 2",
      "value": "option-2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Option 3",
      "value": "option-3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      },
      "expanded": true,
      "sub": {
        "attributes": {
          "sub-data-attribute-1": "sub-value-A",
          "sub-data-attribute-2": "sub-value-B",
          "sub-data-attribute-3": "sub-value-C"
        },
        "items": [
          {
            "text": "Item",
            "value": "item",
            "attributes": {
              "item-data-attribute-1": "item-value-A",
              "item-data-attribute-2": "item-value-B",
              "item-data-attribute-3": "item-value-C"
            }
          },
          {
            "text": "Item",
            "value": "item"
          },
          {
            "text": "Item",
            "value": "item"
          }
        ]
      }
    },
    {
      "text": "Option 4",
      "value": "option-4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Option 5",
      "value": "option-5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
})  }}

Markup


<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-attributes-hint">
  <legend class="  font-bold">
    Selecciona organismo
  </legend>
      <!-- hint -->
  <p id="with-attributes-hint" class="block text-neutral-dark">
    Selecciona el organismo al que perteneces.
  </p>
  <!-- /hint -->
  <ul class="c-tree mt-base" role="tree" id="tree-id-example" data-module="c-tree">
        <li id="with-attributes-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-0-input" name="with-attributes" type="radio" value="option-1" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-0-input">Option 1</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-attributes-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-1-input" name="with-attributes" type="radio" value="option-2" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-1-input">Option 2</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-attributes-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
          </span>
            <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-2-input" name="with-attributes" type="radio" value="option-3" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-2-input">Option 3</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

        </div>
      </div>
      <ul role="group" class="c-tree__itemgroup" sub-data-attribute-1="sub-value-A" sub-data-attribute-2="sub-value-B" sub-data-attribute-3="sub-value-C">
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-attributes-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block" item-data-attribute-1="item-value-A" item-data-attribute-2="item-value-B" item-data-attribute-3="item-value-C">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-attributes-2-0-input" name="with-attributes" type="radio" value="item" item-data-attribute-1="item-value-A" item-data-attribute-2="item-value-B" item-data-attribute-3="item-value-C">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-attributes-2-0-input">Item</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-attributes-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-attributes-2-1-input" name="with-attributes" type="radio" value="item">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-attributes-2-1-input">Item</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-attributes-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                      <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-attributes-2-2-input" name="with-attributes" type="radio" value="item">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-attributes-2-2-input">Item</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>

                </div>
            </li>
     </ul>

        </li>
        <li id="with-attributes-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-3-input" name="with-attributes" type="radio" value="option-4" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-3-input">Option 4</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
        <li id="with-attributes-4" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
                  <div x-data="{ isChecked: false }" class="">
    <div class="relative flex items-start py-xs">
      <div class="flex items-center mx-sm">
        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-4-input" name="with-attributes" type="radio" value="option-5" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
      </div>
      <div class="flex-1 pt-0.5 leading-5">
        <!-- label -->
      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-4-input">Option 5</label>
      
      <!-- /label -->
      </div>
    </div>
  </div>


        </li>
  </ul>
</fieldset>
<!-- /fieldset --></div>
<!-- /tree -->