TextField

TextField is the field, not the input. It owns the value, the validation state and the relationships between the parts — so a Label inside it is already associated with the input, and a Description or FieldError is already referenced by it. Nothing has to be wired up with matching ids.

import { Input, Label, TextField } from "ropav";

Email address

variant

 primarysecondary

size

 xssmmdlg

fullWidth

isDisabled

isReadOnly

isInvalid

<TextField class="w-72" name="email">
  <Label>Email address</Label>
  <Input placeholder="name@example.com" />
</TextField>

With a label and a description

Email addressWe only use this to send receipts.

textfield-basic.vue

<script setup lang="ts">
import { Description, Input, Label, TextField } from "ropav";
</script>

<template>
  <TextField class="field" name="email">
    <Label>Email address</Label>
    <Input placeholder="name@example.com" type="email" />
    <Description>We only use this to send receipts.</Description>
  </TextField>
</template>

<style scoped>
.field {
  width: calc(var(--rp-spacing) * 72);
}
</style>

Validation

is-invalid puts the field in the invalid state and FieldError renders the message. Both parts read the state from the field, so the error cannot be shown while the field says it is fine.

Email addressEnter an address in the form name@example.com.

textfield-invalid.vue

<script setup lang="ts">
import { FieldError, Input, Label, TextField } from "ropav";
</script>

<template>
  <TextField class="field" is-invalid name="email">
    <Label>Email address</Label>
    <Input default-value="not-an-address" type="email" />
    <FieldError>Enter an address in the form name@example.com.</FieldError>
  </TextField>
</template>

<style scoped>
.field {
  width: calc(var(--rp-spacing) * 72);
}
</style>

For validation the browser can do on its own, pass type, pattern, minLength or maxLength and let validationBehavior decide when the message appears. A validate function covers the rest.

Beyond one input

An input with something attached to it — a prefix icon, a unit, a button — is InputGroup, which goes inside the field in place of Input.

API

Prop	Type	Default	Description
ariaDescribedby	string	—	Ids of the elements that describe the field, on top of any nested help text.
ariaLabel	string	—	Accessible name, for a field with no visible label.
ariaLabelledby	string	—	Ids of the elements that name the field.
autoCapitalize	string	—
autoComplete	string	—
autoCorrect	string	—
autoFocus	boolean	—	Whether the field takes focus on mount.
defaultValue	string	—	Text the field starts with, and goes back to when the form is reset.
enterKeyHint	string	—	Action label for the enter key on a virtual keyboard.
form	string	—	id of the form to submit with, for a field rendered outside it.
fullWidth	boolean	—	Whether the field stretches to fill its container.
id	string	—	Lands on the control rather than on the wrapper, because the control is the field as far as assistive technology is concerned, and is what the label points for at.
inputMode	string	—	Keyboard the browser should offer on a touch device.
isDisabled	boolean	—	Whether the field is disabled — no interaction, no submission.
isInvalid	boolean	—	Whether the value fails validation. Setting it either way takes the field over: false claims the field is valid and shadows validate, the browser and the server alike.
isReadOnly	boolean	—	Whether the text can be read but not changed.
isRequired	boolean	—	Whether the field has to be filled in for the form to submit.
maxLength	number	—
minLength	number	—
name	string	—	Name submitted with the form.
pattern	string	—	Value pattern the browser enforces. Ignored by a textarea.
placeholder	string	—	Placeholder shown while the field is empty.
size	"xs" | "sm" | "md" | "lg"	"md"	How tall the control inside stands, matching a button of the same size. Handed to the control unless it declares one of its own.
spellCheck	string | boolean	—
type	string	"text"	Kind of control the browser should offer. Ignored by a textarea.
validate	ValidationFunction<string>	—	Checks the value and returns a message when it is not acceptable.
validationBehavior	"aria" | "native"	"native"	How the field reports validation. Inherited from the surrounding form when unset.
value	string	—	Text in the field. Makes it controlled.
variant	"primary" | "secondary"	"primary"	Visual variant handed down to the control inside.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isInvalid	boolean
isReadOnly	boolean
isRequired	boolean
validationDetails	ValidationDetails
validationErrors	string[]

Event	Payload
change	string
focusChange	boolean
update:value	string

The parts a field composes with — Label, Input, Description, FieldError — are shared with every other field, and each takes only class plus its own native attributes.