Text Field
| Status | stable |
| Published | 5.0.0 |
*
Your publicly visible screen name.
<jds-text-field label="Username" v-model="name" required placeholder="Your username here">
<template #hint>
Your publicly visible screen name.
</template>
<template #error="{ required }">
<template v-if="required">We need to know who you are!</template>
</template>
</jds-text-field>Validation
Supported rules:
| Rule / slot prop | Purpose | Configuration |
|---|---|---|
required | Must not be empty text. | required attribute. |
max | Set a high limit to a number value. | max attribute when type="number". |
min | Set a low limit to a number value. | min attribute when type="number". |
max_length | Set a high length limit to a string value. | max-length attribute. |
min_length | Set a low length limit to a string value. | min-length attribute. |
pattern | Ensure string value matches a regex. | pattern attribute; accepts a JS regex. |
email | Ensure string is a valid email. | Applies automatically when type=email. |
url | Ensure string is a valid URL. | Applies automatically when type=url. |
deny | Ensure value is not a member of a given list of forbidden values. | deny attribute. |
JdsTextField
Props
| Prop | Value | Default | |
| name | string | none | |
| label | string | none | |
| value | string | none | |
| width | number | null | |
| type | textnumberemailurl | 'text' | |
| placeholder | string | (Empty string) | |
| disabled | boolean | false | |
| allowLogging | boolean | false | |
| required | boolean | false | |
| maxLength | string | false | |
| minLength | string | false | |
| max | string | false | |
| min | string | false | |
| deny | Array | null | |
| pattern | string | none |
Events
| Event | Payload | |
| blur | ||
| input |
Slots
| Slot | |||
| label | |||
| hint | |||
| error |
|