<c-input>
Examples
<template>
<div>
<c-input
:filled.prop="query.length > 0"
hint="c-input is the field shell — you provide the native input"
input-id="example-search"
label="Search"
>
<input id="example-search" v-model="query" type="text" />
</c-input>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const query = ref('');
</script>
API reference
<c-input>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
active | active | boolean | false | Set by the wrapping form component when its input has focus or holds a value. |
disabled | disabled | boolean | false | Disable the input |
errorMessage | error-message | string | '' | Error message shown in place of the hint while the input is invalid |
filled | filled | boolean | false | Set by the wrapping form component when its input holds a value. |
hideDetails | hide-details | boolean | false | Hide the hint and error messages |
hint | hint | string | '' | Hint text for the input |
inputId | input-id | string | '' | id of the inner input element (for the label's htmlFor). |
isTextarea | is-textarea | boolean | false | Renders textarea-specific spacing tweaks. |
label | label | string | '' | Label of the input |
labelOnTop | label-on-top | boolean | false | Label on top of the input |
required | required | boolean | false | Set the input as required |
shadow | shadow | boolean | false | Shadow variant of the input |
size | size | CFieldSize | 'default' | Field height: the 44px default or the 36px `small` box |
valid | valid | boolean | true | Set the validíty of the input |
Slots
| Slot | Description |
|---|---|
pre | Leading content (e.g. an icon) inside the field, before the input |
default | The native `<input>` / `<textarea>` element the field wraps |
post | Trailing content (e.g. an icon or button) inside the field, after the input |
CSS parts
Style from outside with c-input::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
root | The outer wrapper of the whole input control |
label | The label element — the on-top label or the floating in-field label, depending on `labelOnTop` |
pre | Wrapper around the `pre` slot content |
post | Wrapper around the `post` slot content |
message | The hint / error message area below the field |
Types
Importable from the package root: import type { … } from '@cscfi/csc-ui'
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';