Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - react-aria-components
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
Call to Action</sp-button> <sp-button variant="primary" onclick="showMessage(this.textContent + ' clicked!')">Primary</sp-button> <sp-button variant="secondary" onclick="showMessage(this.textContent + ' clicked!')">Secondary</sp-button> <sp-button variant="negative" onclick="showMessage(this.textContent + ' clicked!')">Negative</sp-button> </div> <h3>Button Sizes</h3> <div class="button-group"> <sp-button size="s" onclick="showMessage('Small button clicked!')">Small</sp-button> <sp-button size="m" onclick="showMessage('Medium button clicked!')">Medium</sp-button> <sp-button size="l" onclick="showMessage('Large button clicked!')">Large</sp-button> <sp-button size="xl" onclick="showMessage('Extra Large button clicked!')">Extra Large</sp-button> </div> <h3>Action Buttons</h3> <div class="button-group"> <sp-action-button onclick="showMessage('Action button clicked!')">Action</sp-action-button> <sp-action-button selected onclick="showMessage('Selected action button clicked!')">Selected</sp-action-button> <sp-action-button disabled>Disabled</sp-action-button> </div> </div> </div> <div class="component-section"> <h2>Form Controls</h2> <div class="component-grid"> <div class="example-box"> <h3>Text Fields</h3> <div class="form-group"> <sp-textfield placeholder="Enter your name" oninput="updateOutput('name', this.value)"></sp-textfield> </div> <div class="form-group"> <sp-textfield placeholder="Email" type="email" oninput="updateOutput('email', this.value)"></sp-textfield> </div> <div class="form-group"> <sp-textfield placeholder="Password" type="password" oninput="updateOutput('password', this.value ? '***' : '')"></sp-textfield> </div> <div class="form-group"> <sp-textfield placeholder="Disabled field" disabled></sp-textfield> </div> </div> <div class="example-box"> <h3>Checkboxes & Switches</h3> <div class="form-group"> <sp-checkbox onchange="updateOutput('newsletter', this.checked)">Subscribe to newsletter</sp-checkbox> </div> <div class="form-group"> <sp-checkbox checked onchange="updateOutput('terms', this.checked)">Accept terms</sp-checkbox> </div> <div class="form-group"> <sp-checkbox disabled>Disabled option</sp-checkbox> </div> <div class="form-group"> <sp-switch onchange="updateOutput('notifications', this.checked)">Enable notifications</sp-switch> </div> <div class="form-group"> <sp-switch checked onchange="updateOutput('darkMode', this.checked)">Dark mode</sp-switch> </div> </div> </div> <div class="example-box"> <h3>Radio Groups</h3> <sp-radio-group onchange="updateOutput('size', this.value)"> <sp-radio value="small">Small</sp-radio> <sp-radio value="medium" checked>Medium</sp-radio> <sp-radio value="large">Large</sp-radio> </sp-radio-group> </div> <div class="example-box"> <h3>Sliders</h3> <sp-slider min="0" max="100" value="50" oninput="updateOutput('volume', this.value)"></sp-slider> <sp-slider min="0" max="10" step="0.5" value="5" oninput="updateOutput('rating', this.value)"></sp-slider> </div> </div> <div class="component-section"> <h2>Navigation & Layout</h2> <div class="example-box"> <h3>Tabs</h3> <sp-tabs selected="tab1" onchange="showTabContent(this.selected)"> <sp-tab value="tab1">Tab 1</sp-tab> <sp-tab value="tab2">Tab 2</sp-tab> <sp-tab value="tab3">Tab 3</sp-tab> </sp-tabs> <sp-tab-panel value="tab1" id="panel1"> <p>Content for Tab 1 - This is the first tab panel with some sample content.</p> </sp-tab-panel> <sp-tab-panel value="tab2" id="panel2" class="hidden"> <p>Content for Tab 2 - This is the second tab panel with different content.</p> </sp-tab-panel> <sp-tab-panel value="tab3" id="panel3" class="hidden"> <p>Content for Tab 3 - This is the third tab panel with more content.</p> </sp-tab-panel> </div> </div> <div class="component-section"> <h2>Data Display</h2> <div class="example-box"> <h3>Cards</h3> <div class="component-grid"> <sp-card> <div slot="heading">Card Title</div> <div slot="subheading">Card Subtitle</div> <p>This is a sample card with some content. Cards are great for displaying grouped information.</p> </sp-card> <sp-card> <div slot="heading">Another Card</div> <div slot="subheading">With different content</div> <p>Cards can contain various types of content including text, images, and interactive elements.</p> </sp-card> </div> </div> <div class="example-box"> <h3>Progress Indicators</h3> <sp-progress-bar value="30" id="progress1"></sp-progress-bar> <sp-progress-bar value="70" id="progress2"></sp-progress-bar> <sp-progress-bar indeterminate id="progress3"></sp-progress-bar> <sp-button onclick="animateProgress()">Animate Progress</sp-button> </div> <div class="example-box"> <h3>Badges</h3> <div> <sp-badge variant="neutral">Neutral</sp-badge> <sp-badge variant="positive">Positive</sp-badge> <sp-badge variant="negative">Negative</sp-badge> <sp-badge variant="info">Info</sp-badge> <sp-badge variant="seafoam">Seafoam</sp-badge> </div> </div> </div> <div class="component-section"> <h2>Interactive Demo</h2> <div class="interactive-demo"> <h3>Form Interaction Demo</h3> <p>Fill out the form below and see real-time updates:</p> <div class="form-group"> <label>Name:</label> <sp-textfield id="demoName" placeholder="Enter your name" oninput="updateDemo()"></sp-textfield> </div> <div class="form-group"> <label>Favorite Color:</label> <sp-picker id="colorPicker" onchange="updateDemo()"> <sp-menu-item value="red">Red</sp-menu-item> <sp-menu-item value="blue">Blue</sp-menu-item> <sp-menu-item value="green">Green</sp-menu-item> <sp-menu-item value="purple">Purple</sp-menu-item> </sp-picker> </div> <div class="form-group"> <sp-checkbox id="agreeCheck" onchange="updateDemo()">I agree to the terms</sp-checkbox> </div> <div class="form-group"> <label>Experience Level:</label> <sp-slider id="experienceSlider" min="1" max="10" value="5" oninput="updateDemo()"></sp-slider> </div> <sp-button id="submitBtn" variant="cta" disabled onclick="submitForm()">Submit</sp-button> <div class="demo-output" id="demoOutput"> Fill out the form to see live updates here... </div> </div> </div> <div class="component-section"> <h2>Status Messages</h2> <div id="messageContainer"></div> <div class="button-group"> <sp-button onclick="showMessage('Success! Operation completed.', 'success')">Show Success</sp-button> <sp-button onclick="showMessage('Error! Something went wrong.', 'error')">Show Error</sp-button> <sp-button onclick="showMessage('Info: This is an informational message.', 'info')">Show Info</sp-button> </div> </div> <div class="component-section"> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> <div class="demo-output" id="outputContainer"> Interaction outputs will appear here... </div> </div> </div> </sp-theme> <script> const outputs = {}; function updateOutput(key, value) { outputs[key] = value; const container = document.getElementById('outputContainer'); container.innerHTML = Object.entries(outputs) .map(([k, v]) => `${k}: ${v}`) .join('<br>'); } function showMessage(message, type = 'info') { const container = document.getElementById('messageContainer'); const messageDiv = document.createElement('div'); messageDiv.className = `status-message ${type}`; messageDiv.textContent = message; container.appendChild(messageDiv); setTimeout(() => { messageDiv.remove(); }, 3000); } function showTabContent(selectedTab) { const panels = ['panel1', 'panel2', 'panel3']; panels.forEach(panelId => { const panel = document.getElementById(panelId); if (panel) { panel.classList.add('hidden'); } }); const activePanel = document.getElementById(selectedTab.replace('tab', 'panel')); if (activePanel) { activePanel.classList.remove('hidden'); } } function animateProgress() { const progress1 = document.getElementById('progress1'); const progress2 = document.getElementById('progress2'); let value1 = 0; let value2 = 0; const interval = setInterval(() => { value1 += 2; value2 += 1.5; progress1.value = value1; progress2.value = value2; if (value1 >= 100 && value2 >= 100) { clearInterval(interval); setTimeout(() => { progress1.value = 30; progress2.value = 70; }, 1000); } }, 50); } function updateDemo() { const name = document.getElementById('demoName').value; const color = document.getElementById('colorPicker').value; const agreed = document.getElementById('agreeCheck').checked; const experience = document.getElementById('experienceSlider').value; const submitBtn = document.getElementById('submitBtn'); const output = document.getElementById('demoOutput'); const demoData = { name: name || 'Not provided', color: color || 'Not selected', agreed: agreed ? 'Yes' : 'No', experience: `${experience}/10` }; output.innerHTML = Object.entries(demoData) .map(([key, value]) => `${key}: ${value}`) .join('<br>'); submitBtn.disabled = !name || !agreed; } function submitForm() { showMessage('Form submitted successfully!', 'success'); document.getElementById('demoName').value = ''; document.getElementById('colorPicker').value = ''; document.getElementById('agreeCheck').checked = false; document.getElementById('experienceSlider').value = 5; document.getElementById('submitBtn').disabled = true; document.getElementById('demoOutput').innerHTML = 'Form reset. Fill out the form to see live updates here...'; } document.addEventListener('DOMContentLoaded', function() { showMessage('Welcome to the Adobe Spectrum Web Components demo!', 'info'); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">