MenuCaderno UI
npmGitHub
Theme

<cad-input>

Input

Collect a single line of text, with labels, hints, and validation.

Field states

API reference: <cad-input>

autocompleteautocompletestring''disableddisabledbooleanfalseerrorerrorstring''hinthintstring''inputmodeinputModestring''invalidinvalidbooleanfalselabellabelstring''layoutlayoutCadInputLayout'block'maxlengthmaxLengthnumber-1minlengthminLengthnumber-1namenamestring''patternpatternstring''placeholderplaceholderstring''readonlyreadOnlybooleanfalserequiredrequiredbooleanfalsesizesizeCadInputSize'md'tonetoneCadInputTone'blue'typetypeCadInputType'text'valuevaluestring''autocompletestringautocompletenodisabledbooleandisabledyeserrorstringerrornohintstringhintnoinputModestringinputmodenoinvalidbooleaninvalidyeslabelstringlabelnolayoutCadInputLayoutlayoutyesmaxLengthnumbermaxlengthnominLengthnumberminlengthnonamestringnameyespatternstringpatternnoplaceholderstringplaceholdernoreadOnlybooleanreadonlyyesrequiredbooleanrequiredyessizeCadInputSizesizeyestoneCadInputTonetoneyestypeCadInputTypetypeyesvaluestringvaluenochangeEventFired when the user commits a value change.inputEventFired while the user edits the value.labelVisible control label. Falls back to the `label` attribute.prefixOptional leading content inside the field.baseField container.controlNative input.fieldRuled input frame.hintHint or error message.labelVisible label.prefixLeading composition slot.--cad-input-focusPer-instance focus and label color.--cad-input-linePer-instance ruled line color.

Accessibility and forms

Give every field a visible label. Invalid fields expose aria-invalid; pair the visual error mark with a helpful error message.

MIT licensed. Built with Caderno UI.Report an issue
Back to top