- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Miller columns
Component status | Contribution |
---|---|
Current version | @spectrum-css/miller@6.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/miller@7.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Variants
Miller Columns (Branches Selectable)Contribution
Miller columns that allow both files and folders to be selected.
- File 1
- File 2
- File 3
- File 1
- File 2
- File 3
Show markup
<div class="spectrum-MillerColumns">
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" aria-labelledby="assetitemlabel-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-1">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-2" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-2">File 2</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" aria-labelledby="assetitemlabel-3">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-3">File 3</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
</ul>
</div>
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" aria-labelledby="assetitemlabel-4">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-4">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-5" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-5">File 2</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" aria-labelledby="assetitemlabel-6" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-6">File 3</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
</ul>
</div>
</div>
Miller Columns (Files Selectable)Contribution
Miller columns that only allow files to be selected.
- File 1
- File 2
- File 3
- File 1
- File 2
- File 3
Show markup
<div class="spectrum-MillerColumns">
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch" tabindex="0">
<span class="spectrum-AssetList-itemLabel">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item" tabindex="0">
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-7">File 2</span>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-7">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel">File 3</span></span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
</ul>
</div>
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch" tabindex="0">
<span class="spectrum-AssetList-itemLabel">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item" tabindex="0">
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-8">File 2</span>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-8">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
<li class="spectrum-AssetList-item is-selected" tabindex="0">
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-9">File 3</span>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" aria-labelledby="assetitemlabel-9" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
</svg>
</span>
</label>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100"/>
</svg>
</li>
</ul>
</div>
</div>