Composite Input
The KCompositeInput component combines a selection combobox with various input types, ideal for multi-language fields, contact information, or cascading selections. Each selection item can define its own input component type and configuration. Needs a DataProvider instance to supply the selection options.
Multi-Language Support (State Persistence)
Independent values for each selection. Switch between EN/TR/DE to see persistence.
modelValue collection:
[
{
"selection": "en",
"value": "Hello World"
}
]
const languages = [
{ label: 'EN', code: 'en' },
{ label: 'TR', code: 'tr' },
{ label: 'DE', code: 'de' },
{ label: 'FR', code: 'fr' }
]
const languagesProvider = new CFlatClientDataProvider()
languagesProvider.setData(languages)
KCompositeInput(label="Example Label"
v-model:selectionValue="lang"
v-model:modelValue="data"
:dataProvider="languagesProvider"
labelField="label"
valueField="code"
)
Contact Types (Per-Selection Config)
Each contact type uses a different input component: Email uses a textbox, Phone uses a mask, Credit Card uses a mask with a different pattern.
// Each selection item carries its own inputConfig
const contactTypes = [
{ label: 'Email', code: 'email', inputConfig: { type: 'textbox', inputType: 'email', placeholder: 'user@example.com' } },
{ label: 'Phone', code: 'phone', inputConfig: { type: 'maskedtextbox', mask: '+99 (999) 999-9999', placeholder: '+1 (555) 000-0000' } },
{ label: 'Credit Card', code: 'cc', inputConfig: { type: 'maskedtextbox', mask: '9999 9999 9999 9999', placeholder: '0000 0000 0000 0000' } }
]
const contactTypesProvider = new CFlatClientDataProvider()
contactTypesProvider.setData(contactTypes)
const contactValidation = computed(() => {
if (contactType.value === 'email' && contactValue.value) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
return emailRegex.test(contactValue.value) ? 'success' : 'error'
}
if (contactType.value === 'phone' && !contactValue.value) {
return 'warning'
}
return null
})
const contactValidationText = computed(() => {
if (contactValidation.value === 'error') return 'Invalid email format'
if (contactValidation.value === 'warning') return 'Phone number recommended'
return ''
})
KCompositeInput(
v-model:selectionValue="contactType"
v-model:inputValue="contactValue"
v-model:modelValue="contactData"
:dataProvider="contactTypesProvider"
labelField="label"
valueField="code"
placeholder="Type"
:validation="contactValidation"
:validationText="contactValidationText"
)
Cascading Selection (Country → City)
Select a country to populate the city combobox. Each country defines its own inputDataProvider.
// Each country defines its own city list via inputDataProvider
const countries = [
{ label: 'Turkey', code: 'tr', inputConfig: { type: 'combobox', inputDataProvider: turkishCitiesDP, inputLabelField: 'name', inputSearchbox: true } },
{ label: 'Germany', code: 'de', inputConfig: { type: 'combobox', inputDataProvider: germanCitiesDP, inputLabelField: 'name', inputSearchbox: true } }
]
const countriesProvider = new CFlatClientDataProvider()
countriesProvider.setData(countries)
KCompositeInput(
v-model:selectionValue="countrySelection"
v-model:inputValue="cityInput"
v-model:modelValue="cascadeData"
:dataProvider="countriesProvider"
labelField="label"
valueField="code"
)
Searchable List & Large Datasets
Search box enabled for the selection side, providing easy filtering for large datasets.
const fruitsProvider = new CFlatClientDataProvider()
fruitsProvider.setData(fruitsArray)
KCompositeInput(
:dataProvider="fruitsProvider"
labelField="name"
valueField="id"
searchbox
)
Right Selection Layout
KCompositeInput(
v-model:selectionValue="rightSelection"
v-model:inputValue="rightInput"
v-model:modelValue="rightData"
:dataProvider="languagesProvider"
selectionSide="right"
labelField="label"
valueField="code"
placeholder="Lang"
)
DatePicker Variant (US vs GB Formats)
const regions = [
{ label: 'US', code: 'us', inputConfig: { inputFormat: 'MM/DD/YYYY' } },
{ label: 'GB', code: 'gb', inputConfig: { inputFormat: 'DD/MM/YYYY' } }
]
const regionsProvider = new CFlatClientDataProvider()
regionsProvider.setData(regions)
KCompositeInput(
v-model:selectionValue="dateSelection"
v-model:inputValue="dateInput"
v-model:modelValue="dateData"
:dataProvider="regionsProvider"
type="datepicker"
labelField="label"
valueField="code"
showClear
singleValue
)
Textarea Variant
KCompositeInput(
v-model:selectionValue="areaSelection"
v-model:inputValue="areaInput"
v-model:modelValue="areaData"
:dataProvider="languagesProvider"
type="textarea"
labelField="label"
valueField="code"
)
Validation Support
KCompositeInput(
:validation="state"
:validationText="message"
:dataProvider="languagesProvider"
)
Attributes for configuring KCompositeInput behavior.
| Name | Type | Default | Description |
|---|
| label | string | '' | There will be a label. |
| selectionValue | any | null | The currently active selection item (object or primitive) |
| inputValue | any | '' | Current value of the active selection's input |
| modelValue (v-model) | ICompositeItem[] | [] | The full collection of all entered values per selection |
| dataProvider | ADataProvider | - | Data source for the selection combobox |
| type | string | 'textbox' | Default input type: 'textbox', 'textarea', 'maskedtextbox', 'combobox', 'datepicker', 'datetimepicker', 'hourpicker'. Can be overridden per-selection via inputConfig. |
| selectionSide | string | 'left' | Side where the selection combobox is rendered: 'left' or 'right' |
| inputType | string | 'text' | Default HTML input type for 'textbox' variant. Can be overridden per-selection via inputConfig. |
| mask | string | '' | Default mask pattern for 'maskedtextbox' variant. Can be overridden per-selection via inputConfig. |
| labelField | string | 'label' | Field name to display in the selection combobox |
| valueField | string | 'value' | Field name to use as internal value/key for selection |
| placeholder | string | 'Select...' | Placeholder for the selection combobox |
| inputPlaceholder | string | '' | Default placeholder for the main input. Can be overridden per-selection via inputConfig. |
| searchbox | boolean | false | Enable live filtering for selection side |
| showClear | boolean | false | Default show clear button for the main input. Can be overridden per-selection via inputConfig. |
| teleportTo | string | - | Target element for dropdown teleportation |
| inputConfigField | string | 'inputConfig' | Field name on selection items that contains the per-item ICompositeInputConfig object |
| validateAll | boolean | false | When false (default), only the active selection's input is validated. When true, all items in the collection are validated. |
| validation | 'success' | 'warning' | 'error' | null | null | Global semantic validation state. Per-selection inputConfig.validation takes priority. |
| validationText | string | '' | Global validation message. Per-selection inputConfig.validationText takes priority. |
Each item in the selection dataProvider can optionally include an inputConfig field to customize the input component rendered when that item is selected.
| Property | Type | Description |
|---|
| type | CompositeInputType | Input component type to render for this selection |
| inputType | string | HTML input type for textbox ('text', 'email', 'tel', etc.) |
| mask | string | Mask pattern for maskedtextbox |
| placeholder | string | Input placeholder text |
| showClear | boolean | Show clear button |
| inputDataProvider | ADataProvider | For combobox type: separate data source for the secondary input |
| inputLabelField | string | For combobox type: label field for the secondary combobox |
| inputValueField | string | For combobox type: value field for the secondary combobox |
| inputSearchbox | boolean | For combobox type: enable searchbox in the secondary combobox |
| validation | string | Per-selection validation state ('success', 'warning', 'error') |
| validationText | string | Per-selection validation message |
Events
| Name | Payload | Description |
|---|
| update:selectionValue | any | Fired when a different selection item is picked |
| update:inputValue | any | Fired when the active input value changes |
| update:modelValue | ICompositeItem[] | Fired when any value in the collection is updated (for v-model binding) |