Textbox

Textbox component is an interactive elements used to collect user input. It is commonly used in forms and search bars and it is designed for seamless interaction.

Example

Below is an example of the textbox component.

import 'spatial-design-system/primitives/ar-textbox.js';

<a-ar-textbox
  position="0 1.6 -3"
  isactivated="true"
  label="Label"
  size="extra-large"
></a-ar-textbox>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the textbox's visibility. When true, the textbox is visible; when false, it is hidden.
size	enum (small, medium, large, extra-large)	medium	Sets the textbox's size, adjusting padding, font size, and layout compactness accordingly.
position	number[]	0 0 0	Specifies the textbox's position.
primary	string (blue, #fff)	#000000	Defines the primary color of the textbox (affecting text, background, icon background).
variant	string (light, dark)	""	Sets the button's color scheme mode, either "light" or "dark," for visual theme consistency.
isactivated	boolean	false	Specifies whether the textbox is activated.
bordercolor	string	black	Specifies the color of the textbox's border.
textcolor	string	black	Specifies the color of the textbox's text.
label	string	""	Specifies the text of the textbox's label.
useSystemKeyboard	boolean	false	Specifies whether to use the system keyboard.

Limitations

• The use of the system keyboard is partially limited — when you enter text and then try to edit it, the existing textbox value gets overwritten with the new input (according to the official documentation).