# Elements: Form controls, further examples

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator.

The element sections in `elements-form-controls.md` show the first example of each element; these are the rest.

## `pk-calendar`

Example: Monday start, limited range

```html
<pk-calendar week-start="1" min="2026-09-10" max="2026-09-28"></pk-calendar>
```

Example: Range mode

```html
<pk-calendar range start="2026-09-08" end="2026-09-17" month="2026-09-01"></pk-calendar>
```

Example: Range mode with minimum and maximum, Monday start

```html
<pk-calendar range week-start="1" month="2026-09-01" min="2026-09-07" max="2026-09-25" start="2026-09-14" end="2026-09-18"></pk-calendar>
```

## `pk-checkbox`

Example: Select all

```html
<pk-checkbox master="rows">Select all</pk-checkbox>
<pk-checkbox group="rows" checked>Widget 1</pk-checkbox>
<pk-checkbox group="rows">Widget 2</pk-checkbox>
```

## `pk-colour-input`

Example: Picker and hex

```html
<pk-colour-input label="Accent colour" value="#4a90e2"></pk-colour-input>
```

## `pk-combobox`

Example: Clearable

```html
<pk-combobox clearable label="Variant" placeholder="Type to search" value="AC-1002"><option value="AC-1001">AC-1001 - Widget 1</option><option value="AC-1002">AC-1002 - Widget 2</option></pk-combobox>
```

Example: Custom select

```html
<pk-combobox mode="select" label="Channel" placeholder="Choose a channel" value="market"><option value="web">Web</option><option value="market">Market</option><option value="live">Live</option><option value="other" disabled>Poshmark (unavailable)</option></pk-combobox>
```

## `pk-date-range-picker`

Example: Calendar popover

```html
<pk-date-range-picker calendar label="Reporting period" start="2026-09-08" end="2026-09-17"></pk-date-range-picker>
```

Example: Limited to a window, no quick ranges

```html
<pk-date-range-picker label="Trip dates" min="2026-09-01" max="2026-09-30" presets="" start="2026-09-10" end="2026-09-18"></pk-date-range-picker>
```

Example: This quarter, last quarter and last year

```html
<pk-date-range-picker label="Period" presets="quarter,lastquarter,year,lastyear"></pk-date-range-picker>
```

Example: End before start (invalid)

```html
<pk-date-range-picker label="Booking" start="2026-09-20" end="2026-09-10" presets=""></pk-date-range-picker>
```

Example: Disabled

```html
<pk-date-range-picker label="Locked period" start="2026-09-01" end="2026-09-14" disabled></pk-date-range-picker>
```

## `pk-dropzone`

Example: With a browse button

```html
<pk-dropzone label="Attachments" browse-label="Choose files" multiple max-size="2MB">Drop files here<span slot="hint">Or use the button. Up to 2 MB each.</span></pk-dropzone>
```

## `pk-input`

Example: Add-ons, money and stepper

```html
<pk-input label="Price" format="money" value="1234.5"></pk-input>
<pk-input label="Quantity" type="number" select-on-focus stepper min="0" max="10" value="3"></pk-input>
<pk-input label="Domain" value="example"><span slot="prefix">https://</span><span slot="suffix">.com</span></pk-input>
```

Example: Search, password and floating label

```html
<pk-input type="search" label="Search products" placeholder="Search products" clearable debounce="250"></pk-input>
<pk-input type="password" label="Password" reveal autohide="15" autocomplete="current-password"></pk-input>
<pk-input label="Product title" floating></pk-input>
```

Example: Sensitive value: masked, revealable and copyable

```html
<pk-input type="password" label="API key" value="sk_live_5f3c9a1b2e4d" reveal copyable autocomplete="off"></pk-input>
```

Example: Visible label

```html
<pk-input label="Email" show-label type="email"></pk-input>
```

Example: Date and time

```html
<pk-input type="date" label="Release date" value="2026-09-19"></pk-input>
<pk-input type="time" label="Ships by" value="14:30"></pk-input>
```

## `pk-lookup-picker`

Example: Several customers (chips; labels for keys that are not on a loaded page come from selected-labels)

```html
<pk-lookup-picker multiple label="Customers" placeholder="Choose customers" values='["C1","C2","C3"]' selected-labels='{"C1":"Acme Hardware","C2":"Globex","C3":"Initech"}' columns='[{"key":"name","label":"Name"}]'></pk-lookup-picker>
```

## `pk-markdown-editor`

Example: Split layout, shorter toolbar

```html
<pk-markdown-editor label="Notes" layout="split" toolbar="bold italic link" rows="5" value="# Notes

- one
- two"></pk-markdown-editor>
```

## `pk-property-grid`

Example: Range and colour editors; Threshold is only shown while Mode is Custom (visibleWhen)

```html
<pk-property-grid config='{"groups":[{"heading":"Appearance","fields":[{"key":"mode","type":"select","label":"Mode","options":["Auto","Custom"]},{"key":"threshold","type":"range","label":"Threshold","min":0,"max":100,"visibleWhen":{"key":"mode","equals":"Custom"}},{"key":"accent","type":"color","label":"Accent colour"}]}]}' values='{"mode":"Custom","threshold":40,"accent":"#3366cc"}'></pk-property-grid>
```

Example: Grouped properties; Width is below its minimum, so it shows its validation message

```html
<pk-property-grid config='{"groups":[{"heading":"Dimensions","fields":[{"key":"width","type":"number","label":"Width (px)","min":1,"max":4096,"required":true},{"key":"height","type":"number","label":"Height (px)","min":1,"max":4096}]},{"heading":"Output","fields":[{"key":"format","type":"select","label":"Format","options":["PNG","JPEG","WebP"]},{"key":"transparent","type":"switch","label":"Transparent background"}]},{"heading":"Advanced (collapsed)","collapsed":true,"fields":[{"key":"note","type":"text","label":"Export note","disabled":true}]}]}' values='{"width":0,"height":600,"format":"PNG","transparent":true,"note":"Locked by the template"}'></pk-property-grid>
```

## `pk-radio-group`

Example: Segmented

```html
<pk-radio-group variant="segmented" label="View" value="week"><option value="day">Day</option><option value="week">Week</option><option value="month">Month</option></pk-radio-group>
<pk-radio-group variant="segmented" fill label="Channel" value="all"><option value="all">All</option><option value="web">Web</option><option value="market">Market</option></pk-radio-group>
```

## `pk-select`

Example: Options from data

```html
<pk-select label="Status" value="draft" options='[{"value":"active","label":"Active"},{"value":"draft","label":"Draft"},{"value":"archived","label":"Archived"}]'></pk-select>
<pk-select label="Fruit" options='[{"group":"Citrus","options":[{"value":"orange","label":"Orange"},{"value":"lemon","label":"Lemon"}]},{"group":"Pome","options":[{"value":"apple","label":"Apple"},{"value":"pear","label":"Pear"}]}]'></pk-select>
```

## `pk-switch`

Example: Sizes and label position

```html
<pk-switch size="sm">Small</pk-switch>
<pk-switch size="lg" checked>Large</pk-switch>
<pk-switch label-position="between">Email me a daily summary</pk-switch>
```

## `pk-tag-input`

Example: Locked and editable tags

```html
<pk-tag-input label="Tags" locked-tags="system" locked-title="Inferred from category, not editable here" value="dc,variant"></pk-tag-input>
```

## `pk-textarea`

Example: Fixed and auto-grow

```html
<pk-textarea label="Notes" rows="3" value="Fixed height, resizable."></pk-textarea>
<pk-textarea label="Description" autogrow max-height="160" value="Grows as you type, up to 160px."></pk-textarea>
```

## `pk-unit-input`

Example: Another set of units

```html
<pk-unit-input label="Duration" units="ms s" value="250ms"></pk-unit-input>
```
