Skip to main content
Version: 1.16.0

Text

Overview

The Text component allows the user to display a single line text element.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
errorstring""Text to be displayed in errorError will not be displayed if unspecified or left empty
idstring""Component id name
labelstring""Label for the componentLabel will not be displayed if unspecified or left empty
placeholderstring""Placeholder text for entry example
prefixstring""Text to be displayed before the input text
suffixstring""Text to be displayed after the input text
textAlignstring"left"Text alignmentsAvailable options:
"left" : Aligned to the left
"right" : Aligned to the right
valuestring""Text to be displayed
disabledbooleanfalseEnable/Disable the component
requiredIconbooleanfalseShow/Hide the required icon
visiblebooleantrueShow/Hide the component

Event

Here is a list of events that can be specified:

NameTypeDescriptionRemark
changefunctionEvent handler when the value has been changedIt will pass the event object as the argument

You can receive the following values in event.detail
event.detail.oldValue : Value before the change
event.detail.value : Value after the change
focusfunctionEvent handler when the component is focusedIt will pass the event object as the argument

You can receive the following values in event.detail
event.detail.value : Value at the time of focus
inputfunctionEvent handler when the value has been inputtingIt will pass the event object as the argument

You can receive the following values in event.detail
event.detail.data : Value of inserted characters
event.detail.value : Value of target element

*Notes on the value of "event.detail.data"
It is inserted characters when inserting text
It will be "null" when inserting by "Paste" or "Drag and Drop" or pressing "Enter", "Delete", or "Backspace"

Constructor

Text(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

Name
--kuc-text-input-width
--kuc-text-input-height
--kuc-text-input-font-size
--kuc-text-input-color

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const space = kintone.app.record.getSpaceElement('space');

const text = new Kuc.Text({
label: 'Fruit',
requiredIcon: true,
value: 'Apple',
placeholder: 'Apple',
prefix: '$',
suffix: 'yen',
textAlign: 'left',
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
space.appendChild(text);

text.addEventListener('change', event => {
console.log(event);
});

text.addEventListener('focus', event => {
console.log(event);
});

text.addEventListener('input', event => {
console.log(event);
});