Form components

Button Link to Button

Five variants, three sizes, a loading state with aria-busy and icon-only buttons with an accessible name.

Live demo

Props

Prop	Type	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	Visual style. Default primary.
`size`	`'sm' \| 'md' \| 'lg'`	Control height and padding.
`loading`	`boolean`	Shows a spinner, sets aria-busy and disables the button.
`block`	`boolean`	Full width.
`iconOnly`	`boolean`	Square button for a single icon. Pass aria-label.

Accessibility

Button keyboard support
Key	Action
`Enter` / `Space`	Activates the button
`Tab`	Moves focus to the next control

Button · React

<Button>Save</Button>
<Button variant="outline">Preview</Button>
<Button variant="danger" loading>Deleting</Button>

Button · Vue

<Button>Save</Button>
<Button variant="outline">Preview</Button>
<Button variant="danger" loading>Deleting</Button>

Button · Svelte

<Button>Save</Button>
<Button variant="outline">Preview</Button>
<Button variant="danger" loading>Deleting</Button>

Button · Astro

---
import Button from '@pelagic-ui/astro/components/Button';
---
<Button>Save</Button>
<Button variant="outline">Preview</Button>

Button · React Native

<Button title="Save" />
<Button title="Preview" variant="outline" />
<Button title="Deleting" variant="danger" loading />

Button · Angular

import { PlButton } from '@pelagic-ui/angular';

@Component({
  imports: [PlButton],
  template: `
    <button plButton>Save</button>
    <button plButton variant="outline">Preview</button>
    <button plButton variant="danger" [loading]="true">Deleting</button>`,
})
export class Actions {}

Input Link to Input

A labelled text field with hint and error messages wired to aria-describedby.

Live demo

Full nameAs it appears on your ID

EmailEnter a valid email address

Props

Prop	Type	Description
`label`	`string`	Visible label linked with htmlFor.
`hint`	`string`	Helper text under the field.
`error`	`string`	Error text. Sets aria-invalid and replaces the hint.
`…input attributes`	`InputHTMLAttributes`	type, value, onChange, placeholder, autoComplete, etc.

Accessibility

Input keyboard support
Key	Action
`Tab`	Moves focus into and out of the field

Input · React

const [email, setEmail] = useState('');
<Input label="Email" type="email" value={email}
  onChange={(e) => setEmail(e.target.value)}
  error={email ? undefined : 'Required'} />

Input · Vue

<Input v-model="email" label="Email" type="email"
  :error="email ? undefined : 'Required'" />

Input · Svelte

<Input bind:value={email} label="Email" type="email"
  error={email ? undefined : 'Required'} />

Input · Astro

<Input name="email" label="Email" type="email" hint="We never share it" />

Input · React Native

<Input label="Email" value={email} onChangeText={setEmail}
  keyboardType="email-address" error={email ? undefined : 'Required'} />

Input · Angular

<pl-input label="Email" type="email" [(value)]="email"
  [error]="email() ? undefined : 'Required'" />

Textarea Link to Textarea

Multi-line text with the same label, hint and error wiring as Input.

Live demo

Project brief0/280 characters

Props

Prop	Type	Description
`label`	`string`	Visible label.
`hint / error`	`string`	Helper or error message.
`rows`	`number`	Initial visible rows.

Accessibility

Textarea keyboard support
Key	Action
`Tab`	Moves focus; Enter inserts a new line

Textarea · React

<Textarea label="Project brief" rows={4} value={brief}
  onChange={(e) => setBrief(e.target.value)} hint="Markdown supported" />

Textarea · Vue

<Textarea v-model="brief" label="Project brief" :rows="4" hint="Markdown supported" />

Textarea · Svelte

<Textarea bind:value={brief} label="Project brief" rows={4} hint="Markdown supported" />

Textarea · Astro

<Textarea name="brief" label="Project brief" rows={4} hint="Markdown supported" />

Textarea · React Native

<Textarea label="Project brief" value={brief} onChangeText={setBrief} />

Textarea · Angular

<pl-textarea label="Project brief" [rows]="4" [(value)]="brief" hint="Markdown supported" />

Select Link to Select

A native select with a styled trigger, placeholder option and linked label.

Live demo

Team

Selected: none

Props

Prop	Type	Description
`options`	`{ label, value, disabled? }[]`	Choices to render.
`placeholder`	`string`	Empty first option.
`label / hint / error`	`string`	Field metadata.

Accessibility

Select keyboard support
Key	Action
`Arrow Up` / `Arrow Down`	Changes the selected option
`Alt + Arrow Down`	Opens the native list

Select · React

<Select label="Team" placeholder="Choose a team" value={team}
  onChange={(e) => setTeam(e.target.value)}
  options={[{ label: 'Design', value: 'design' }, { label: 'Engineering', value: 'eng' }]} />

Select · Vue

<Select v-model="team" label="Team" placeholder="Choose a team" :options="teams" />

Select · Svelte

<Select bind:value={team} label="Team" placeholder="Choose a team" options={teams} />

Select · Astro

<Select name="team" label="Team" placeholder="Choose a team" options={teams} />

Select · React Native

<Select label="Team" value={team} onChange={setTeam} options={teams} />

Select · Angular

<pl-select label="Team" placeholder="Choose a team" [options]="teams" [(value)]="team" />

Checkbox Link to Checkbox

A native checkbox with a visible, clickable label.

Live demo

Email me updatesWeekly digestSMS alerts (unavailable)

Props

Prop	Type	Description
`label`	`ReactNode`	Label text.
`checked / onChange`	`boolean / ChangeEvent`	Controlled state.
`disabled`	`boolean`	Disables the control.

Accessibility

Checkbox keyboard support
Key	Action
`Space`	Toggles the checkbox

Checkbox · React

<Checkbox label="Email me updates" checked={updates}
  onChange={(e) => setUpdates(e.target.checked)} />

Checkbox · Vue

<Checkbox v-model="updates" label="Email me updates" />

Checkbox · Svelte

<Checkbox bind:checked={updates} label="Email me updates" />

Checkbox · Astro

<Checkbox name="updates" label="Email me updates" checked />

Checkbox · React Native

<Checkbox label="Email me updates" checked={updates} onChange={setUpdates} />

Checkbox · Angular

<pl-checkbox label="Email me updates" [(value)]="updates" />

Switch Link to Switch

An on/off toggle using role="switch" with aria-checked.

Live demo

Dark previews: On

Props

Prop	Type	Description
`checked`	`boolean`	Current state.
`onChange`	`(checked: boolean) => void`	Called on toggle.
`label`	`string`	Accessible name (required).
`disabled`	`boolean`	Disables the switch.

Accessibility

Switch keyboard support
Key	Action
`Space` / `Enter`	Toggles the switch

Switch · React

<Switch label="Dark previews" checked={dark} onChange={setDark} />

Switch · Vue

<Switch v-model="dark" label="Dark previews" />

Switch · Svelte

<Switch bind:checked={dark} label="Dark previews" />

Switch · Astro

<Switch name="dark" label="Dark previews" checked />

Switch · React Native

<Switch label="Dark previews" checked={dark} onChange={setDark} />

Switch · Angular

<pl-switch label="Dark previews" [(value)]="dark" />

RadioGroup Link to RadioGroup

A fieldset of radio buttons with a legend; one option can be chosen.

Live demo

FreeProEnterprise

Plan: pro

Props

Prop	Type	Description
`name`	`string`	Shared input name.
`options`	`{ label, value, disabled? }[]`	Choices.
`value / onChange`	`string / (value) => void`	Controlled selection.
`label`	`string`	Legend text.

Accessibility

RadioGroup keyboard support
Key	Action
`Arrow keys`	Move selection between options
`Tab`	Moves into and out of the group

RadioGroup · React

<RadioGroup name="plan" label="Plan" value={plan} onChange={setPlan}
  options={[{ label: 'Free', value: 'free' }, { label: 'Pro', value: 'pro' }]} />

RadioGroup · Vue

<RadioGroup v-model="plan" name="plan" label="Plan" :options="plans" />

RadioGroup · Svelte

<RadioGroup bind:value={plan} name="plan" label="Plan" options={plans} />

RadioGroup · Astro

<RadioGroup name="plan" label="Plan" value="pro" options={plans} />

RadioGroup · React Native

<RadioGroup label="Plan" value={plan} onChange={setPlan} options={plans} />

RadioGroup · Angular

<pl-radio-group name="plan" label="Plan" [options]="plans" [(value)]="plan" />

Slider Link to Slider

A range input with an optional live value readout.

Live demo

Budget (k$) 40

Props

Prop	Type	Description
`value / onChange`	`number / (value) => void`	Controlled value.
`min / max / step`	`number`	Range. Defaults 0, 100, 1.
`label`	`string`	Visible label.
`showValue`	`boolean`	Shows the current value next to the label.

Accessibility

Slider keyboard support
Key	Action
`Arrow keys`	Change by one step
`Page Up` / `Page Down`	Change by a larger step
`Home` / `End`	Jump to min / max

Slider · React

<Slider label="Budget" value={budget} onChange={setBudget} showValue />

Slider · Vue

<Slider v-model="budget" label="Budget" show-value />

Slider · Svelte

<Slider bind:value={budget} label="Budget" showValue />

Slider · Astro

<Slider name="budget" label="Budget" value={40} showValue />

Slider · Angular

<pl-slider label="Budget" [(value)]="budget" showValue />

Segmented Link to Segmented

A compact single-choice control for switching views.

Live demo

View: grid

Props

Prop	Type	Description
`options`	`{ label, value }[]`	Segments.
`value / onChange`	`string / (value) => void`	Controlled selection.
`label`	`string`	Accessible group name (required).

Accessibility

Segmented keyboard support
Key	Action
`Arrow keys`	Move between segments

Segmented · React

<Segmented label="View" value={view} onChange={setView}
  options={[{ label: 'Grid', value: 'grid' }, { label: 'List', value: 'list' }]} />

Segmented · Vue

<Segmented v-model="view" label="View" :options="views" />

Segmented · Svelte

<Segmented bind:value={view} label="View" options={views} />

Segmented · Astro

<Segmented name="view" label="View" options={views} />

Segmented · React Native

<Segmented label="View" value={view} onChange={setView} options={views} />

Segmented · Angular

<pl-segmented label="View" [options]="views" [(value)]="view" />

Accessibility

Theme

Contrast & color

Text

Reading aids

Motion & media

Interaction

Sound

Button #Link to Button

Props

Accessibility

Code

Input #Link to Input

Props

Accessibility

Code

Textarea #Link to Textarea

Props

Accessibility

Code

Select #Link to Select

Props

Accessibility

Code

Checkbox #Link to Checkbox

Props

Accessibility

Code

Switch #Link to Switch

Props

Accessibility

Code

RadioGroup #Link to RadioGroup

Props

Accessibility

Code

Slider #Link to Slider

Props

Accessibility

Code

Segmented #Link to Segmented

Props

Accessibility

Code

Button Link to Button

Input Link to Input

Textarea Link to Textarea

Select Link to Select

Checkbox Link to Checkbox

Switch Link to Switch

RadioGroup Link to RadioGroup

Slider Link to Slider

Segmented Link to Segmented