Welcome to the Notice System Demo

This banner notice is visible across all pages. Try navigating to different routes to see how notices follow you.

Back to Examples

Form Components

A complete collection of form components for building interactive forms.

Input

Basic text input field for single-line text entry.

Text Input

Value: (empty)

Email Input

Password Input

Disabled Input

Tel

URL

Textarea

Multi-line text input for longer content.

Message

0 characters

With more rows

Disabled

Checkbox

Checkboxes for boolean selections with optional labels.

I agree to the Terms of Service and Privacy Policy

Send me marketing emails about new features and updates

Enable desktop notifications

Terms accepted: No

Marketing opt-in: No

Notifications: Yes

Disabled checkbox

Checkbox with error state

You must accept this

Switch

Toggle switches for on/off settings.

Dark Mode

Switch to dark theme

Auto-save

Automatically save changes

Public Profile

Make your profile visible to others

Dark mode: Off

Auto-save: On

Public profile: Off

Disabled switch

Select

Dropdown select for choosing from a list of options.

Status

Selected: None

Category (Grouped)

Selected: None

With built-in label

With error

Please select an option

FileUpload

Drag-and-drop file upload with preview and validation.

Upload documents

Click to upload or drag and drop

Images, PDF (max 5.0 MB)

Drag and drop files here or click to browse

RadioGroup

Radio button group for single selection from multiple options.

Select a plan (vertical)

Basic For individuals and small projects

Standard For growing teams and businesses

Enterprise For large organizations

Selected: standard

Quick choice (horizontal)

Yes

Maybe

Slider

Range slider for selecting numeric values or ranges.

Volume 75

Price Range $20 - $80

Range slider with two thumbs: $20 - $80

Small

Medium (default)

Large

NumberInput

Numeric input with increment/decrement buttons.

Quantity

Value: 1

Without stepper

With error

Value must be positive

Combobox (Autocomplete)

Searchable dropdown with async loading support.

Select a country

Selected: None

With error state

Please select a country

MultiSelect

Select multiple options with tags display.

Select technologies

Selected (0): None

DateTimePicker

Combined date and time selection in a single picker.

Select date and time

Selected: None

24-hour format

With error

Date is required

OTPInput

One-time password input for verification codes.

Enter verification code

Value: (empty)

4-digit PIN

With error state

Invalid code

Signature

Capture signatures via drawing or typed name with cursive fonts. Includes legal consent checkbox and multiple export formats.

Your signature

Color

Thickness

I agree to use this as my legal signature and consent to electronic signing.

Draw your signature or type your name and select a font

Type-only signature

Draw-only signature (no customization)

By signing, I acknowledge that this is a legally binding signature.

Component Features

Input: Multiple types (text, email, password, search, tel, url), disabled state
Textarea: Multi-line text, configurable rows, resizable
Checkbox: Labels with rich content, required/disabled/error states
Switch: Toggle on/off, disabled state, accessible
Select: Options with groups, disabled items, error states, built-in label
FileUpload: Drag-and-drop, preview images, file validation, progress indicator
RadioGroup: Vertical/horizontal layout, descriptions, keyboard navigation
Slider: Single value or range, size variants, custom formatting
NumberInput: Stepper buttons, min/max constraints, keyboard support
Combobox: Async search with debounce, loading states, filtering
MultiSelect: Multiple selection with tags, max limit support
DateTimePicker: Calendar + time selection, 12h/24h formats
OTPInput: Auto-advance, paste support, numeric/alphanumeric modes
Signature: Draw or type modes, cursive fonts, legal consent, PNG/SVG/DataURL export, stroke customization, validation