Aqua Basis

The AqTextField component provides a versatile and accessible input field for capturing user text.

It supports customization through properties, slots, and events, making it adaptable for different use cases such as forms, search bars, or interactive UIs.

<aq-text-field
	char-counter
	max-length="20"
	strict-length
	is-plain
	placeholder="This is plain"
	icon="aq-icon-settings"
	label="This is a label"
	sublabel="Sub"
	helper-text="This is a helper text"
	is-required
	info="This is a tooltip"
></aq-text-field>

image 1 (1).png

Data Types

These constants provide default icon configurations for the AqTextField component.

They ensure consistency across different use cases and reduce the need to repeatedly define UI behavior when handling input interactions.

Constants

Familiarity with AqTextField’s default data is essential for understanding its baseline behavior and how it responds when no custom configurations are provided.

Constants

Types

Provide flexibility and precision for reusable and composite values.

Types

Props and Attributes

Prop / Attr	Type	Default	Description
`idTextField`	`string`	–	ID attribute for the text field.
`name`	`string`	–	Name attribute for the text field (used in forms).
`type`	`string`	`'text'`	Input type (e.g., text, password, email).
`autocomplete`	`string`	`'off'`	Defines the browser’s autocomplete behavior.
`placeholder`	`string`	`''`	Placeholder text displayed when the field is empty.
`maxLength`	`number`	`DEFAULT_MAX_LENGTH`	Maximum allowed characters.
`strictLength`	`boolean`	`false`	Enforces exact character length.
`charCounter`	`boolean`	`false`	Shows a character counter.
`isTextarea`	`boolean`	`false`	Switches input to a textarea variant.
`textareaHeight`	`number`	`TEXT_AREA_MAX_LENGTH`	Height for textarea variant.
`icon`	`string`	`''`	Custom icon displayed inside the field.
`label`	`string`	`''`	Main label displayed for the field.
`subLabel`	`string`	`''`	Secondary label or helper title.
`tooltipWidth`	`string`	`''`	Defines a custom tooltip width.
`info`	`string`	`''`	Info text for tooltip or description.
`helperText`	`string`	`''`	Supporting text shown below the field.
`isError`	`boolean`	`false`	Marks the field as invalid or in an error state.
`isDisabled`	`boolean`	`false`	Disables the field.
`isReadonly`	`boolean`	`false`	Makes the field read-only.
`isRequired`	`boolean`	`false`	Marks the field as required.
`isPlain`	`boolean`	`false`	Removes borders and styling for a plain look.
`hasDisclosure`	`boolean`	`false`	Enables a disclosure element inside the field.
`iconDisclosure`	`string`	`ICON_DISCLOSURE`	Icon used for the disclosure button.
`hasClear`	`boolean`	`false`	Displays a clear icon, `ICON_CLOSE`, inside the field.
`showClearOnHover`	`boolean`	`false`	Shows the clear icon only on hover.
`iconClear`	`string`	`ICON_CLOSE`	Icon used for clearing the field content.

PlayGround

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqtextfield--default&nav=0

<aside> ⚠️

</aside>

Events

| --- | --- | --- | --- | --- | --- |

Event Types

| --- | --- | --- | --- |

Slots

| --- | --- |

<aq-text-field
  char-counter
  max-length="20"
  strict-length
  placeholder="This is plain"
  icon="aq-icon-settings"
  label="This is a label"
  sublabel="Sub"
  helper-text="This is a helper text"
  is-required
  info="This is a tooltip"
>
  <div slot="left-content">
    <aq-helper-text>left-contents</aq-helper-text>
  </div>
</aq-text-field>;

Binding Support by Framework

| --- | --- | --- | --- |

Data Types

Constants

Types

Props and Attributes

PlayGround

Events

Event Types

Slots

Binding Support by Framework

In Frameworks