zWebUI
v0.1.0 中 Dark

Basics

Button

5 variants, 3 sizes, loading and disabled states. Supports prefix/suffix slots for icons.

Primary Secondary Outline Ghost Danger
Show Code 
<z-button variant="primary">Primary</z-button>
<z-button variant="secondary">Secondary</z-button>
<z-button variant="outline">Outline</z-button>
<z-button variant="ghost">Ghost</z-button>
<z-button variant="danger">Danger</z-button>

Sizes & States

Small Medium Large Disabled Loading Click Me
Show Code 
<z-button size="sm">Small</z-button>
<z-button size="lg">Large</z-button>
<z-button disabled>Disabled</z-button>
<z-button loading>Loading</z-button>

Input

Text input with label, hint, error, clearable, prefix/suffix slots, and multiline (textarea) mode.

@
Show Code 
<z-input label="Username" placeholder="Enter username" clearable>
  <span slot="prefix">@</span>
</z-input>
<z-input label="Password" type="password"></z-input>
<z-input label="Bio" multiline></z-input>

Select

Dropdown select with keyboard navigation. Uses FloatingPosition + FocusTrap primitives.

Apple Banana Cherry Durian (disabled)
Show Code 
<z-select placeholder="Choose a fruit...">
  <z-option value="apple">Apple</z-option>
  <z-option value="banana">Banana</z-option>
</z-select>
China United States Japan Germany France United Kingdom South Korea Australia
Show Code 
<!-- 前端搜索：searchable 即可 -->
<z-select searchable placeholder="Search a country...">
  <z-option value="cn">China</z-option>
  <z-option value="us">United States</z-option>
</z-select>

<!-- 后端搜索：search-mode="backend"，监听 z-search 自行 fetch，替换 z-option -->
<z-select searchable search-mode="backend"></z-select>

// 或使用回调（property，返回 Promise 时自动重建选项并管理 loading）
select.remoteMethod = async (q) => fetch(`/api/options?q=${q}`).json()

Checkbox

Standard checkbox with indeterminate state support.

I agree to the terms Pre-checked Disabled Indeterminate Toggle Indeterminate
Show Code 
<z-checkbox value="agree">I agree</z-checkbox>
<z-checkbox checked>Pre-checked</z-checkbox>
<z-checkbox disabled>Disabled</z-checkbox>

Radio / RadioGroup

Radio buttons managed by a RadioGroup container. Supports vertical and horizontal layouts, keyboard navigation.

Vertical (default)

Apple Banana Cherry Durian

Horizontal

Small Medium Large
Show Code 
<z-radio-group name="fruit" value="apple">
  <z-radio value="apple">Apple</z-radio>
  <z-radio value="banana">Banana</z-radio>
</z-radio-group>
<!-- horizontal layout -->
<z-radio-group orientation="horizontal">...</z-radio-group>

Switch

Toggle switch with smooth thumb animation. Two sizes, supports form participation via hidden native input.

Wi-Fi Small switch Disabled on
Show Code 
<z-switch>Wi-Fi</z-switch>
<z-switch size="sm">Small switch</z-switch>
<z-switch checked disabled>Disabled on</z-switch>