<c-text-field>
Examples
<template>
<div>
<c-text-field
v-model="name"
hint="Shown on your public profile"
label="Display name"
/>
<p>Value: {{ name }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const name = ref('');
</script>
<template>
<div style="display: flex; align-items: flex-start; gap: 16px">
<c-text-field v-model="query" label="Search" size="small" />
<c-button size="small">Search</c-button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const query = ref('');
</script>
<template>
<div>
<c-text-field
v-model="description"
hint="A rows value above 1 renders a textarea"
label="Description"
rows="4"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const description = ref('');
</script>
API reference
<c-text-field>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
autocomplete | autocomplete | string | '' | HTML input autocomplete |
autocorrect | autocorrect | boolean | — | Enable native input autocorrection (Safari). Maps to the input's `autocorrect="on"`/`"off"` attribute; left unset (browser default per input type) when not specified. Mirrors the platform `HTMLElement.autocorrect` boolean. |
automaticCapitalize | automatic-capitalize | CTextFieldAutocapitalize | — | HTML input autocapitalize |
disabled | disabled | boolean | false | Disable the input |
errorMessage | error-message | string | '' | Error message shown in place of the hint while the input is invalid |
hideDetails | hide-details | boolean | false | Hide the hint and error messages |
hint | hint | string | '' | Hint text for the input |
hostId | host-id | string | '' | Id of the input |
label | label | string | '' | Label of the input |
labelOnTop | label-on-top | boolean | false | Label on top of the input |
max | max | null | number | null | Maximum value on a numeric input |
min | min | null | number | null | Minimum value on a numeric input |
name | name | string | '' | Name of the input |
placeholder | placeholder | string | '' | Placeholder of the input |
readonly | readonly | boolean | false | Mark as readonly |
required | required | boolean | false | Set the input as required |
rows | rows | number | 1 | Rows on the input |
shadow | shadow | boolean | false | Shadow variant of the input |
size | size | CFieldSize | 'default' | Field height: the 44px default or the 36px `small` box (single-line fields) |
step | step | null | number | null | Step size on a numeric input |
trimWhitespace | trim-whitespace | boolean | false | Trim whitespace from the return value |
type | type | CTextFieldType | 'text' | Type of the input |
valid | valid | boolean | true | Set the validity of the input |
value | value | string | '' | Value of the input |
Events
| Event | Detail | Description |
|---|---|---|
change | void | Standard bubbling DOM change event, re-dispatched from the host when the inner input/textarea fires its native change (which does not cross the shadow boundary). No detail; read the current text from the host's `value` property. |
changeValue | string | Fired on every keystroke (and on native change), carrying the current text — trimmed when `trim-whitespace` is set. Also dispatched as `change-value` — bind that name in Vue templates. |
input | void | Native bubbling input event fired alongside every value change so a plain Vue `v-model` works without the `v-control` directive. No detail. |
update:value | string | v-model contract event fired on every keystroke (and on native change), carrying the current text — trimmed when `trim-whitespace` is set. |
Slots
| Slot | Description |
|---|---|
pre | Content added before the input |
post | Content added after the input |
Types
Importable from the package root: import type { … } from '@cscfi/csc-ui'
CTextFieldAutocapitalize
Native `autocapitalize` behaviour of the input.
export type CTextFieldAutocapitalize =
| 'characters'
| 'none'
| 'off'
| 'on'
| 'sentences'
| 'words';CTextFieldProps
export interface CTextFieldProps {
/**
* HTML input autocomplete
*
* @seeded from csc-ui — verify
* @freeform any HTML autocomplete token list
*/
autocomplete?: string;
/**
* Enable native input autocorrection (Safari). Maps to the input's
* `autocorrect="on"`/`"off"` attribute; left unset (browser default per
* input type) when not specified. Mirrors the platform
* `HTMLElement.autocorrect` boolean.
*/
autocorrect?: boolean;
/**
* HTML input autocapitalize
*
* @seeded from csc-ui — verify
*/
automaticCapitalize?: CTextFieldAutocapitalize;
/**
* Disable the input
*
* @seeded from csc-ui — verify
*/
disabled?: boolean;
/**
* Error message shown in place of the hint while the input is invalid
*
* @freeform
*/
errorMessage?: string;
/**
* Hide the hint and error messages
*
* @seeded from csc-ui — verify
*/
hideDetails?: boolean;
/**
* Hint text for the input
*
* @seeded from csc-ui — verify
* @freeform
*/
hint?: string;
/**
* Id of the input
*
* @seeded from csc-ui — verify
* @freeform
*/
hostId?: string;
/**
* Label of the input
*
* @seeded from csc-ui — verify
* @freeform
*/
label?: string;
/**
* Label on top of the input
*
* @seeded from csc-ui — verify
*/
labelOnTop?: boolean;
/**
* Maximum value on a numeric input
*
* @seeded from csc-ui — verify
*/
max?: null | number;
/**
* Minimum value on a numeric input
*
* @seeded from csc-ui — verify
*/
min?: null | number;
/**
* Name of the input
*
* @seeded from csc-ui — verify
* @freeform
*/
name?: string;
/**
* Placeholder of the input
*
* @seeded from csc-ui — verify
* @freeform
*/
placeholder?: string;
/**
* Mark as readonly
*
* @seeded from csc-ui — verify
*/
readonly?: boolean;
/**
* Set the input as required
*
* @seeded from csc-ui — verify
*/
required?: boolean;
/**
* Rows on the input
*
* @seeded from csc-ui — verify
*/
rows?: number;
/**
* Shadow variant of the input
*
* @seeded from csc-ui — verify
*/
shadow?: boolean;
/** Field height: the 44px default or the 36px `small` box (single-line fields) */
size?: CFieldSize;
/**
* Step size on a numeric input
*
* @seeded from csc-ui — verify
*/
step?: null | number;
/**
* Trim whitespace from the return value
*
* @seeded from csc-ui — verify
*/
trimWhitespace?: boolean;
/**
* Type of the input
*
* @seeded from csc-ui — verify
*/
type?: CTextFieldType;
/**
* Set the validity of the input
*
* @seeded from csc-ui — verify
*/
valid?: boolean;
/**
* Value of the input
*
* @seeded from csc-ui — verify
* @freeform
*/
value?: string;
}CTextFieldType
Type of the input. `password` gets a reveal toggle, `date` a picker button, `number` honours `min`/`max`/`step`; the rest map straight to the native input type.
export type CTextFieldType =
| 'date'
| 'email'
| 'number'
| 'password'
| 'search'
| 'tel'
| 'text'
| 'url';CFieldSize shared
Field height of the form controls built on `c-input`. `default` is the 44px field; `small` is the 36px field. Owned here because the value passes from the wrapping control (`c-select`) into `c-input`.
export type CFieldSize = 'default' | 'small';