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:

Name	Type	Default	Description	Remark
className	string	""	Component class name
error	string	""	Text to be displayed in error	Error will not be displayed if unspecified or left empty
id	string	""	Component id name
label	string	""	Label for the component	Label will not be displayed if unspecified or left empty
placeholder	string	""	Placeholder text for entry example
prefix	string	""	Text to be displayed before the input text
suffix	string	""	Text to be displayed after the input text
textAlign	string	"left"	Text alignments	Available options: "left" : Aligned to the left "right" : Aligned to the right
value	string	""	Text to be displayed
disabled	boolean	false	Enable/Disable the component
requiredIcon	boolean	false	Show/Hide the required icon
visible	boolean	true	Show/Hide the component

Event

Here is a list of events that can be specified:

Name	Type	Description	Remark
change	function	Event handler when the value has been changed	It 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
focus	function	Event handler when the component is focused	It 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
input	function	Event handler when the value has been inputting	It 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

Name	Type	Default	Description	Remark
options	object	{}	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);
});

---

Related Articles

• In-office day list customization
• Search box customization
• Search box customization with TypeScript
• Table and ReadOnlyTable customization