vueda

Appearance

View Markdown

Inputs ​

This page shows the Visual Contract of the text-entry, selection, and toggle controls: labels, text inputs, selects, number fields, checkboxes, radio groups, tags inputs, one-time code inputs, sliders, input groups, and file pickers. Components describes the rules every component page shares.

Input shell ​

The input shell is the field treatment shared by Input, Textarea, NativeSelect, NumberFieldInput, TagsInput, and InputGroup. The select trigger on Selection + Command and the fields on Date + Time use it too. A re-skin keeps these states distinct wherever a control has them:

  • Rest: a filled field with a bottom edge line. Hover steps the fill.
  • Focus: the edge line takes the focus color, and a focus ring surrounds the whole field.
  • Warning: a field marked data-warning="true" and not invalid shows its edge line in the warning color.
  • Invalid: aria-invalid="true" shows the edge line and the focus ring in the destructive color.
  • Read-only: the fill drops away and the line softens, so the field reads as displayed text.
  • Disabled: a disabled fill, edge, and text color at full opacity. The value stays readable, and the field takes no pointer input.

Every shell sits on the control height scale. Input.root is the reference recipe. Current values: --field, --field-hover, --field-line, --ring, --warning, --destructive, --border, --disabled, --disabled-foreground, --vueda-control-height, and --vueda-field-radius.

Label ​

Label is the text paired with a control. It holds text alone or text with an icon. A label dims under a group ancestor with data-disabled="true". It also dims after a disabled control marked peer. Label.root lists these arrangements. Inside a FormField, the label dims while the field's widget is disabled, as Field shell describes.

Theme key: Label.

Input ​

Input is the single-line text field and uses the input shell. Its states combine validation (default, invalid) with the read mode (editable, read-only, disabled). The type attribute passes to the native element, so the browser draws the password mask and the file picker button.

Theme key: Input.

Textarea ​

Textarea is the multi-line text field and uses the input shell. Its height grows with its content.

Theme key: Textarea.

NativeSelect ​

NativeSelect renders a native <select> in the input shell and draws its own chevron, so the closed control looks the same on every operating system. The value never runs under the chevron. The browser draws the open option list, including NativeSelectOptGroup labels. A native select has no read-only state.

Theme keys: NativeSelect, NativeSelectOption, NativeSelectOptGroup.

NumberField ​

NumberField pairs a NumberFieldInput with optional NumberFieldDecrement and NumberFieldIncrement steppers inside NumberFieldContent. The input uses the input shell, and the steppers sit inside its edge on either side of the value. The value sits centered in fixed-width numerals, so its width stays stable while it steps. A stepper dims when the value reaches min or max. formatOptions formats the displayed value for the locale.

Theme keys: NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput.

Checkbox ​

Checkbox has three values: unchecked, checked, and indeterminate. Checked and indeterminate share one solid fill. The check and indeterminate marks come from the Icon Registry, and the default slot replaces them. The box corner is rounder than the field corner, so the box reads as a separate kind of control from the text fields beside it.

Focus shows a focus ring. Invalid shows the destructive color on the edge, and on the fill of a checked or indeterminate box. A disabled box keeps its mark and uses the disabled fill, edge, and mark color at full opacity. Disabled colors take precedence over invalid colors.

Theme key: Checkbox. Current values: --vueda-checkbox-radius, --primary, --destructive, --disabled, and --disabled-foreground.

RadioGroup ​

RadioGroup holds mutually exclusive RadioGroupItem choices. Each item matches the checkbox in size and in its focus, invalid, and disabled treatments. The selected mark is a drawn dot in the item's selection color; invalid turns the dot destructive. The group only lays out its items.

A disabled item keeps its dot visible. A disabled group applies the disabled treatment to every item.

Theme keys: RadioGroup, RadioGroupItem.

TagsInput ​

TagsInput is an input shell that holds committed TagsInputItem chips followed by a TagsInputInput for the next entry. Chips wrap onto new rows as they accumulate. Each chip holds a TagsInputItemText and a TagsInputItemDelete button. Only one focus ring shows at a time: the field's while you type, or a chip's when a chip has focus.

Theme keys: TagsInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput. Chip height: --vueda-chip-height.

InputOTP ​

InputOTP shows a one-time code as a row of InputOTPSlot cells, one character each. An InputOTPGroup joins adjacent slots so they share one edge and read as one field. An InputOTPSeparator between groups is decorative. The active slot shows a blinking caret.

Set aria-invalid="true" on InputOTP to give every slot a destructive edge. The focus ring follows the active slot, including across separated groups, and uses the destructive color while invalid. Disabled takes precedence: disabled slots use the disabled fill, text, and edge colors at full opacity. Filled slots keep their characters and empty slots stay blank.

In a form, the WidgetOTPInput Widget renders this control.

Theme keys: InputOTP, InputOTPGroup, InputOTPSlot.

Slider ​

Slider is a track with one or more draggable thumbs. Its modelValue is an array of numbers, and each entry renders one thumb, so one component covers a single value and a range. With one thumb, the filled range runs from the track start to the thumb. With two thumbs, it runs between them.

step quantizes the value, and minStepsBetweenThumbs keeps two thumbs apart. The slider emits its value on every change while a thumb moves and does not debounce. orientation set to vertical turns the track upright.

A disabled slider keeps its thumb positions and selected span visible, using disabled colors at full opacity in either orientation.

Theme keys: Slider. Current values: --primary (range), --muted (track), --ring (thumb focus), --disabled, and --disabled-foreground.

InputGroup ​

InputGroup joins addons to one control so the group reads as a single field. The group draws the input shell, including the edge, focus ring, and invalid state, and the inner control draws no shell of its own. Put an InputGroupInput or InputGroupTextarea inside, then any number of InputGroupAddon elements around it.

align places an addon. inline-start (the default) and inline-end sit beside the control on the same row; block-start and block-end sit above and below it. An addon holds any content. Two ready pieces ship with the family: InputGroupText for static labels, prefixes, and units, and InputGroupButton for an action. InputGroupButton defaults to a ghost emphasis at xssize, so it fits the row.

Theme keys: InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupButton, InputGroupTextarea.

FileUpload ​

FileUpload hides a native file input behind a "Choose file" trigger and emits the chosen MDN: File through modelValue. accept (default *) filters what the picker offers; the component does not check a dropped file against it. maxFileSize (bytes, default 1,000,000) drops a larger file without emitting. dropzone adds a drop target and an "or drag and drop here" line around the trigger.

The component selects a file and sends nothing. accept and maxFileSize run only in the browser, so the server must validate file type and size itself.

Theme keys: FileUpload.