ChūshōTextField
Augmented form field for text input.
Usage
See using components for detailed instructions.
js
import { CTextField } from 'chusho';
Config
The options below are to be set in the global configuration at the following location:
js
{
components: {
textField: {
class({ required, disabled, readonly, type, modelValue, variant }) => {},
},
},
}
class
Classes applied to the input element, except when the prop bare is set to true. See styling components.
- type:
Array<String | Object> | Object | String | (props: Object) => {} - default:
null
Example
js
class({ type }) {
return ['field', `field--${type}`]
}
API
| Name | Type | Default | Description | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Props | ||||||||||
| variant | string|array|object | undefined | Useful when used in the component config | |||||||
| bare | boolean | false | Disable class inheritance from the component config. See styling components. | |||||||
| disabled | boolean | null | Set the HTML disabled attribute | |||||||
| required | boolean | null | Set the HTML required attribute | |||||||
| readonly | boolean | null | Set the HTML readonly attribute | |||||||
| type | string | 'text' | Usual HTML input element type attribute for textual input (text, email, tel, url, …) | |||||||
| modelValue | string|number | null | Input value | |||||||
| Events | ||||||||||
| update:modelValue | When the input value changes.
| |||||||||
Examples
Controlled
vue
<template>
<CTextField v-model="value" />
</template>
<script>
export default {
data() {
return {
value: 'Default value',
},
},
}
</script>
With type
vue
<template>
<CTextField v-model="value" type="email" />
</template>
<!-- ... -->