128 lines
12 KiB
Plaintext
128 lines
12 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page FormsShowcase {
|
|
layout = "showcase"
|
|
seo {
|
|
title = "Forms components"
|
|
description = "11 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">11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
|
<div class="category-meta"><span>11 components</span><span>Multiple use cases</span><span>103 live configurations</span></div>
|
|
</header>
|
|
<div class="catalog-grid">
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Checkbox" size="default" color="primary" id="checkbox-1" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[]" options="[]" checked="true" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></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 · 0 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-1" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="FileInput" size="default" color="primary" id="file-input-1" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Input" size="default" color="primary" id="input-1" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></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>28 props · 0 slots</span><a href="/components/input">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="InputGroup" size="default" color="primary" id="input-group-1" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="Check" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Radio" size="default" color="primary" id="radio-1" name="radioField" label="Standard plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="standard" options="[]" checked="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-1" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Select" size="default" color="primary" id="select-1" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Switch" size="default" color="primary" id="switch-1" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Textarea" size="default" color="primary" id="textarea-1" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></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">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="TimePicker" size="default" color="primary" id="time-picker-1" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></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>
|
|
}
|
|
}
|