Text input

<TextField label="Regular" />
<TextField label="Regular" placeholder="Placeholder" />
<TextField label="Solo" solo="true" />
<TextField label="Solo" placeholder="Placeholder" solo="true" />
<TextField label="Filled" filled="true" />
<TextField label="Filled" placeholder="Placeholder" filled="true" />
<TextField label="Outlined" outlined="true" />
<TextField label="First Name" placeholder="Placeholder" outlined="true" />

<TextField label="Website or social profile link" hint="For example, Twitter or Facebook" />
<TextField label="Website or social profile link" hint="For example, Twitter or Facebook" persistentHint="true" outlined="true" />

<TextField label="Website or social profile link" clearable="true" />
<TextField label="Website or social profile link" hint="For example, Twitter or Facebook"
    placeholder="You website here" outlined="true" persistentHint="true" clearable="true"
    value="https://viewi.net" />

<TextField label="Website or social profile link" filled="true" counter="25" />
<TextField label="Website or social profile link" hint="This field counts words instead of characters"
    counter="5" solo="true" counterValue="{fn (?string $value) => count(explode(' ', $value ?? ''))}"
    value="Preliminary report" />

function getValidationRules(): array
{
    return [
        'max' => fn (?string $value) => strlen($value ?? '') <= 25 || 'Max 25 characters',
        'required' => fn (?string $value) => !!$value || 'This field is required'
    ];
}
...
<TextField label="Website or social profile link" counter="25" rules="{getValidationRules()}"
    hint="Has validation rules" persistentHint="true"
    value="California is a state in the western United States" />
<TextField label="Website or social profile link" hint="For example, Twitter or Facebook"
    placeholder="You website here" outlined="true" persistentHint="true" clearable="true" counter="25"
    rules="{getValidationRules()}" value="https://viewi.net" />

<TextField label="Regular" dense="true" />
<TextField label="First Name" placeholder="Placeholder" outlined="true" dense="true" />

<TextField label="Regular" disabled="true" value="John Doe" />
<TextField label="Regular" readonly="true" value="John Doe" />

<TextField label="Main input" rules="{getValidationRules()}" hideDetails="auto" />
<TextField label="Another input" />

<TextField label="Main input" outlined="true" shaped="true" />
<TextField label="Another input" filled="true" shaped="true" />

<TextField label="Prepend" prependIcon="mdi-map-marker" />
<TextField label="Prepend inner" prependInnerIcon="mdi-map-marker" />

<TextField label="Append" solo="true" appendIcon="mdi-map-marker" />
<TextField label="Append outer" solo="true" appendOuterIcon="mdi-map-marker" />

<TextField label="Amount" value="10.00" prefix="\$"></TextField>
<TextField label="Weight" value="{28.01}" suffix="lbs"></TextField>
<TextField label="Email address" value="example" suffix="@gmail.com"></TextField>
<TextField label="Label Text" value="12:30:00" type="time" suffix="PST"></TextField>