LoveUI
Components

Field

Explore 18 interactive field examples covering common layouts, states, sizes, and real interface patterns.

Visible on your profile

Demo

Select a item.

Autocomplete

Checkbox

Frameworks

Select one or more frameworks.

Checkbox Group

Select a item.

Combobox

Apple
Strawberry

Select multiple items.

Combobox Multiple

This is an optional field

Complete Form

This field is currently disabled.

Disabled

Error

Choose a value between 1 and 100.

Number Field

Use at least 12 characters.

Password

Choose Plan

Select the plan that fits your needs.

Radio

Required

This is an optional field

Select

This is an optional field

Slider

Switch

Write a short bio. Maximum 500 characters.

Textarea

{
  "state": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  },
  "error": "",
  "errors": [],
  "value": null,
  "initialValue": null,
  "validity": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  }
}

Validity

Empty

A container for displaying empty state information.

Fieldset

A native fieldset element with a legend.