138 lines
21 KiB
Plaintext
138 lines
21 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page FormsShowcase {
|
|
layout = "showcase"
|
|
seo {
|
|
title = "Forms components"
|
|
description = "12 forms components from @wrnexus/ui."
|
|
}
|
|
view {
|
|
<header class="showcase-hero showcase-hero--category">
|
|
<span class="showcase-eyebrow">Component category</span>
|
|
<h1 class="showcase-title">Forms</h1>
|
|
<p class="showcase-description">12 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
|
<div class="category-meta"><span>12 components</span><span>Multiple use cases</span><span>32 live configurations</span></div>
|
|
</header>
|
|
<div class="catalog-grid">
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><Checkbox size="default" label="Checkbox" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" values='[{"id":"checkbox-0-1","key":"checkbox-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' options='[{"id":"checkbox-0-1","key":"checkbox-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p></div>
|
|
<div class="catalog-card-footer"><span>27 props · 1 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#8b5cf6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Color Picker</h2><p>Theme-aware, responsive color picker component.</p></div>
|
|
<div class="catalog-card-footer"><span>19 props · 0 slots</span><a href="/components/color-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>File Input</h2><p>Theme-aware, responsive file input component.</p></div>
|
|
<div class="catalog-card-footer"><span>21 props · 0 slots</span><a href="/components/file-input">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p></div>
|
|
<div class="catalog-card-footer"><span>29 props · 0 slots</span><a href="/components/input">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="https://" endText=".example.com" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Input Group</h2><p>Theme-aware, responsive input group component.</p></div>
|
|
<div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/input-group">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p></div>
|
|
<div class="catalog-card-footer"><span>25 props · 0 slots</span><a href="/components/radio">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><RangeSlider size="default" color="primary" id="" name="volume" label="Scale" hiddenLabel="false" placeholder="" variant="normal" icon="" iconPosition="start" value="2.4" min="0" max="5" step="0.2" showValue="true" showBounds="true" showSteps="false" marks='[]' helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" class="" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Range Slider</h2><p>Theme-aware, responsive range slider component.</p></div>
|
|
<div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/range-slider">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Search Box</h2><p>Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.</p></div>
|
|
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/search-box">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><Select size="default" label="Select" hiddenLabel="false" value="sample-1" values='[{"id":"select-0-1","key":"select-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' options='[{"id":"select-0-1","key":"select-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' placeholder="Enter a sample value" variant="normal" icon="" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p></div>
|
|
<div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/select">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
|
|
<div class="catalog-card-footer"><span>20 props · 0 slots</span><a href="/components/switch">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><Textarea size="default" label="Textarea" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p></div>
|
|
<div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/textarea">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><TimePicker size="default" name="meeting-time" label="Meeting time" hiddenLabel="false" value="09:30" placeholder="Enter a sample value" variant="normal" icon="" inline="false" minuteStep="5" hours='["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]' minutes='["00","05","10","15","20","25","30","35","40","45","50","55"]' readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Forms</span><h2>Time Picker</h2><p>Theme-aware, responsive time picker component.</p></div>
|
|
<div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/time-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article></div>
|
|
}
|
|
}
|