yTextarea

Description

The yTextarea component is designed for multi-line text input, offering extensive functionalities for text manipulation and display. It's particularly useful for cases where users need to input longer forms of text, such as comments, descriptions, or any other form of extended input.

• Creating a feedback form

Basic Structure

The yTextarea component is comprised of several parts, including the label, content area, hint text, and optional icons for additional functionalities. Here's a closer look at its basic structure:

Label

Provides a title or description for the yTextarea, indicating what type of input is expected.

Content

The content is the main area where users can input their text. It can be resized to accommodate more content.

Hint Text

Offers additional guidance or examples to help users understand what they should input.

Properties

Through its various properties the yTextarea can be configured to suit your needs. The display below provides you with an overview of all the yTextarea properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-textarea__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-textarea__component-type

The type of the component. For this component it is -textarea.

Name: name

String Property

--y-textarea__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-textarea__version

The custom version of the Textarea-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-textarea__core-theme

The CoreTheme, which will be apllied to the Textarea. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-textarea__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Textarea. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-textarea__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-textarea__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-textarea__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-textarea__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-textarea__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-textarea__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-textarea__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-textarea__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-textarea__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-textarea__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-textarea__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-textarea__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-textarea__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-textarea__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-textarea__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-textarea__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-textarea__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-textarea__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-textarea__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-textarea__bg-color

--y-textarea__bg-color__normal

--y-textarea__bg-color__hover

--y-textarea__bg-color__active

--y-textarea__bg-color__focus

--y-textarea__bg-color__disabled

--y-textarea__bg-color__error

--y-textarea__bg-color__readonly

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-textarea__border-top-color

--y-textarea__border-top-color__normal

--y-textarea__border-top-color__hover

--y-textarea__border-top-color__focus

--y-textarea__border-top-color__active

--y-textarea__border-top-color__disabled

--y-textarea__border-top-color__error

--y-textarea__border-top-color__readonly

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-textarea__border-top-style

--y-textarea__border-top-style__normal

--y-textarea__border-top-style__hover

--y-textarea__border-top-style__focus

--y-textarea__border-top-style__active

--y-textarea__border-top-style__disabled

--y-textarea__border-top-style__error

--y-textarea__border-top-style__readonly

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-textarea__border-top-width

--y-textarea__border-top-width__normal

--y-textarea__border-top-width__hover

--y-textarea__border-top-width__focus

--y-textarea__border-top-width__active

--y-textarea__border-top-width__disabled

--y-textarea__border-top-width__error

--y-textarea__border-top-width__readonly

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-textarea__border-right-color

--y-textarea__border-right-color__normal

--y-textarea__border-right-color__hover

--y-textarea__border-right-color__focus

--y-textarea__border-right-color__active

--y-textarea__border-right-color__disabled

--y-textarea__border-right-color__error

--y-textarea__border-right-color__readonly

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-textarea__border-right-style

--y-textarea__border-right-style__normal

--y-textarea__border-right-style__hover

--y-textarea__border-right-style__focus

--y-textarea__border-right-style__active

--y-textarea__border-right-style__disabled

--y-textarea__border-right-style__error

--y-textarea__border-right-style__readonly

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-textarea__border-right-width

--y-textarea__border-right-width__normal

--y-textarea__border-right-width__hover

--y-textarea__border-right-width__focus

--y-textarea__border-right-width__active

--y-textarea__border-right-width__disabled

--y-textarea__border-right-width__error

--y-textarea__border-right-width__readonly

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-textarea__border-bottom-color

--y-textarea__border-bottom-color__normal

--y-textarea__border-bottom-color__hover

--y-textarea__border-bottom-color__focus

--y-textarea__border-bottom-color__active

--y-textarea__border-bottom-color__disabled

--y-textarea__border-bottom-color__error

--y-textarea__border-bottom-color__readonly

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-textarea__border-bottom-style

--y-textarea__border-bottom-style__normal

--y-textarea__border-bottom-style__hover

--y-textarea__border-bottom-style__focus

--y-textarea__border-bottom-style__active

--y-textarea__border-bottom-style__disabled

--y-textarea__border-bottom-style__error

--y-textarea__border-bottom-style__readonly

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-textarea__border-bottom-width

--y-textarea__border-bottom-width__normal

--y-textarea__border-bottom-width__hover

--y-textarea__border-bottom-width__focus

--y-textarea__border-bottom-width__active

--y-textarea__border-bottom-width__disabled

--y-textarea__border-bottom-width__error

--y-textarea__border-bottom-width__readonly

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-textarea__border-left-color

--y-textarea__border-left-color__normal

--y-textarea__border-left-color__hover

--y-textarea__border-left-color__focus

--y-textarea__border-left-color__active

--y-textarea__border-left-color__disabled

--y-textarea__border-left-color__error

--y-textarea__border-left-color__readonly

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-textarea__border-left-style

--y-textarea__border-left-style__normal

--y-textarea__border-left-style__hover

--y-textarea__border-left-style__focus

--y-textarea__border-left-style__active

--y-textarea__border-left-style__disabled

--y-textarea__border-left-style__error

--y-textarea__border-left-style__readonly

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-textarea__border-left-width

--y-textarea__border-left-width__normal

--y-textarea__border-left-width__hover

--y-textarea__border-left-width__focus

--y-textarea__border-left-width__active

--y-textarea__border-left-width__disabled

--y-textarea__border-left-width__error

--y-textarea__border-left-width__readonly

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-textarea__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

String Property

--y-textarea__box-shadow

--y-textarea__box-shadow__normal

--y-textarea__box-shadow__hover

--y-textarea__box-shadow__focus

--y-textarea__box-shadow__active

--y-textarea__box-shadow__disabled

--y-textarea__box-shadow__error

--y-textarea__box-shadow__readonly

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-textarea__opacity

--y-textarea__opacity__normal

--y-textarea__opacity__hover

--y-textarea__opacity__focus

--y-textarea__opacity__active

--y-textarea__opacity__disabled

--y-textarea__opacity__error

--y-textarea__opacity__readonly

The opacity of all colored parts of the component. This value is set in percent.

LABELread more

Name: label__fontColor

Injectable

Color Property

--y-textarea__label__font-color

--y-textarea__label__font-color__normal

--y-textarea__label__font-color__hover

--y-textarea__label__font-color__focus

--y-textarea__label__font-color__active

--y-textarea__label__font-color__disabled

--y-textarea__label__font-color__error

--y-textarea__label__font-color__readonly

The color of the label text. This can be set as a color from a palette or a custom hex color.

Name: label__fontFamily

Injectable

String Property

--y-textarea__label__font-family

--y-textarea__label__font-family__normal

--y-textarea__label__font-family__hover

--y-textarea__label__font-family__focus

--y-textarea__label__font-family__active

--y-textarea__label__font-family__disabled

--y-textarea__label__font-family__error

--y-textarea__label__font-family__readonly

The font-family of the label text. This can be picked from a large list of provided fonts.

Name: label__fontWeight

Injectable

Number Property

--y-textarea__label__font-weight

--y-textarea__label__font-weight__normal

--y-textarea__label__font-weight__hover

--y-textarea__label__font-weight__focus

--y-textarea__label__font-weight__active

--y-textarea__label__font-weight__disabled

--y-textarea__label__font-weight__error

--y-textarea__label__font-weight__readonly

The font-weight of the label text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: label__fontStyle

Injectable

String Property

--y-textarea__label__font-style

--y-textarea__label__font-style__normal

--y-textarea__label__font-style__hover

--y-textarea__label__font-style__active

--y-textarea__label__font-style__focus

--y-textarea__label__font-style__disabled

--y-textarea__label__font-style__error

--y-textarea__label__font-style__readonly

The font-style of the label text. This can be set to normal, italic or oblique.

Name: label__textTransform

Injectable

String Property

--y-textarea__label__text-transform

--y-textarea__label__text-transform__normal

--y-textarea__label__text-transform__hover

--y-textarea__label__text-transform__active

--y-textarea__label__text-transform__focus

--y-textarea__label__text-transform__disabled

--y-textarea__label__text-transform__error

--y-textarea__label__text-transform__readonly

The text-transformation of the label text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: label__textDecoration

Injectable

String Property

--y-textarea__label__text-decoration

--y-textarea__label__text-decoration__normal

--y-textarea__label__text-decoration__hover

--y-textarea__label__text-decoration__active

--y-textarea__label__text-decoration__focus

--y-textarea__label__text-decoration__disabled

--y-textarea__label__text-decoration__error

--y-textarea__label__text-decoration__readonly

The text-decoration of the label text. This can be set to:

• strikethrough
• underline

Name: label__fontSize

Injectable

UnitNumber Property

--y-textarea__label__font-size

The font-size of the label text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: label

String Property

--y-textarea__label

The actual written text in the label. There is no limit to the number of characters.

CONTENTread more

Name: content__bgColor

Injectable

Color Property

--y-textarea__content__bg-color

--y-textarea__content__bg-color__normal

--y-textarea__content__bg-color__hover

--y-textarea__content__bg-color__focus

--y-textarea__content__bg-color__active

--y-textarea__content__bg-color__disabled

--y-textarea__content__bg-color__error

--y-textarea__content__bg-color__readonly

The color of the content background. This can be set as a color from a palette or a custom hex color.

Name: content__fontColor

Injectable

Color Property

--y-textarea__content__font-color

--y-textarea__content__font-color__normal

--y-textarea__content__font-color__hover

--y-textarea__content__font-color__focus

--y-textarea__content__font-color__active

--y-textarea__content__font-color__disabled

--y-textarea__content__font-color__error

--y-textarea__content__font-color__readonly

The font-color of the text-content inside the Textarea-component.

Name: content__fontFamily

Injectable

String Property

--y-textarea__content__font-family

--y-textarea__content__font-family__normal

--y-textarea__content__font-family__hover

--y-textarea__content__font-family__focus

--y-textarea__content__font-family__active

--y-textarea__content__font-family__disabled

--y-textarea__content__font-family__error

--y-textarea__content__font-family__readonly

The font-family of the text-content inside the Textarea-component.

Name: content__fontWeight

Injectable

Number Property

--y-textarea__content__font-weight

--y-textarea__content__font-weight__normal

--y-textarea__content__font-weight__hover

--y-textarea__content__font-weight__focus

--y-textarea__content__font-weight__active

--y-textarea__content__font-weight__disabled

--y-textarea__content__font-weight__error

--y-textarea__content__font-weight__readonly

The font-weight of the text-content inside the Textarea-component.

Name: content__fontStyle

Injectable

String Property

--y-textarea__content__font-style

--y-textarea__content__font-style__normal

--y-textarea__content__font-style__hover

--y-textarea__content__font-style__focus

--y-textarea__content__font-style__active

--y-textarea__content__font-style__disabled

--y-textarea__content__font-style__error

--y-textarea__content__font-style__readonly

The font-style of the text-content inside the Textarea-component.

Name: content__textTransform

Injectable

String Property

--y-textarea__content__text-transform

--y-textarea__content__text-transform__normal

--y-textarea__content__text-transform__hover

--y-textarea__content__text-transform__focus

--y-textarea__content__text-transform__active

--y-textarea__content__text-transform__disabled

--y-textarea__content__text-transform__error

--y-textarea__content__text-transform__readonly

The text-transformation of the content text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: content__textDecoration

Injectable

String Property

--y-textarea__content__text-decoration

--y-textarea__content__text-decoration__normal

--y-textarea__content__text-decoration__hover

--y-textarea__content__text-decoration__focus

--y-textarea__content__text-decoration__active

--y-textarea__content__text-decoration__disabled

--y-textarea__content__text-decoration__error

--y-textarea__content__text-decoration__readonly

The text-decoration of the content text. This can be set to:

• strikethrough
• underline

Name: content__fontSize

Injectable

UnitNumber Property

--y-textarea__content__font-size

The font-size of the text-content inside the Textarea-component.

Name: content__fontAlign

Injectable

String Property

--y-textarea__content__font-align

The font-align of the content text. This property moves the content text to the desired position, it can be set to left, center or right.

Name: content__paddingLeftRight

Injectable

UnitNumber Property

--y-textarea__content__padding-left-right

This property creates a space within the component, inside of the left and right border. This can be set in percent or pixels.

Name: content__marginBottom

Injectable

UnitNumber Property

--y-textarea__content__margin-bottom

This property creates a space around the content of the Textarea-component, outside of the bottom border. This can be set in percent or pixels.

Name: value

String Property

--y-textarea__value

The content to be displayed inside the Textarea-component.

PLACEHOLDERread more

Name: placeholder__fontColor

Injectable

Color Property

--y-textarea__placeholder__font-color

--y-textarea__placeholder__font-color__normal

--y-textarea__placeholder__font-color__hover

--y-textarea__placeholder__font-color__active

--y-textarea__placeholder__font-color__focus

--y-textarea__placeholder__font-color__disabled

--y-textarea__placeholder__font-color__error

--y-textarea__placeholder__font-color__readonly

The color of the placeholder text. This can be set as a color from a palette or a custom hex color.

Name: placeholder__fontFamily

Injectable

String Property

--y-textarea__placeholder__font-family

--y-textarea__placeholder__font-family__normal

--y-textarea__placeholder__font-family__hover

--y-textarea__placeholder__font-family__active

--y-textarea__placeholder__font-family__focus

--y-textarea__placeholder__font-family__disabled

--y-textarea__placeholder__font-family__error

--y-textarea__placeholder__font-family__readonly

The font-family of the placeholder text. This can be picked from a large list of provided fonts.

Name: placeholder__fontWeight

Injectable

Number Property

--y-textarea__placeholder__font-weight

--y-textarea__placeholder__font-weight__normal

--y-textarea__placeholder__font-weight__hover

--y-textarea__placeholder__font-weight__active

--y-textarea__placeholder__font-weight__focus

--y-textarea__placeholder__font-weight__disabled

--y-textarea__placeholder__font-weight__error

--y-textarea__placeholder__font-weight__readonly

The font-weight of the placeholder text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: placeholder__fontStyle

Injectable

String Property

--y-textarea__placeholder__font-style

--y-textarea__placeholder__font-style__normal

--y-textarea__placeholder__font-style__hover

--y-textarea__placeholder__font-style__active

--y-textarea__placeholder__font-style__focus

--y-textarea__placeholder__font-style__disabled

--y-textarea__placeholder__font-style__error

--y-textarea__placeholder__font-style__readonly

The font-style of the placeholder text. This can be set to normal, italic or oblique.

Name: placeholder__textTransform

Injectable

String Property

--y-textarea__placeholder__text-transform

--y-textarea__placeholder__text-transform__normal

--y-textarea__placeholder__text-transform__hover

--y-textarea__placeholder__text-transform__active

--y-textarea__placeholder__text-transform__focus

--y-textarea__placeholder__text-transform__disabled

--y-textarea__placeholder__text-transform__error

--y-textarea__placeholder__text-transform__readonly

The text-transformation of the placeholder text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: placeholder__textDecoration

Injectable

String Property

--y-textarea__placeholder__text-decoration

--y-textarea__placeholder__text-decoration__normal

--y-textarea__placeholder__text-decoration__hover

--y-textarea__placeholder__text-decoration__active

--y-textarea__placeholder__text-decoration__focus

--y-textarea__placeholder__text-decoration__disabled

--y-textarea__placeholder__text-decoration__error

--y-textarea__placeholder__text-decoration__readonly

The text-decoration of the placeholder text. This can be set to:

• strikethrough
• underline

Name: placeholder__fontSize

Injectable

UnitNumber Property

--y-textarea__placeholder__font-size

The font-size of the placeholder text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: placeholder__fontAlign

Injectable

String Property

--y-textarea__placeholder__font-align

The font-align of the placeholder text. This property moves the placeholder text to the desired position, it can be set to left, center or right.

Name: placeholder

String Property

--y-textarea__placeholder

The placeholder-text to be displayed as a placeholder.

HINTread more

Name: hint__fontColor

Injectable

Color Property

--y-textarea__hint__font-color

--y-textarea__hint__font-color__normal

--y-textarea__hint__font-color__hover

--y-textarea__hint__font-color__active

--y-textarea__hint__font-color__focus

--y-textarea__hint__font-color__disabled

--y-textarea__hint__font-color__error

--y-textarea__hint__font-color__readonly

The color of the hint text. This can be set as a color from a palette or a custom hex color.

Name: hint__fontFamily

Injectable

String Property

--y-textarea__hint__font-family

--y-textarea__hint__font-family__normal

--y-textarea__hint__font-family__hover

--y-textarea__hint__font-family__active

--y-textarea__hint__font-family__focus

--y-textarea__hint__font-family__disabled

--y-textarea__hint__font-family__error

--y-textarea__hint__font-family__readonly

The font-family of the hint text. This can be picked from a large list of provided fonts.

Name: hint__fontWeight

Injectable

Number Property

--y-textarea__hint__font-weight

--y-textarea__hint__font-weight__normal

--y-textarea__hint__font-weight__hover

--y-textarea__hint__font-weight__active

--y-textarea__hint__font-weight__focus

--y-textarea__hint__font-weight__disabled

--y-textarea__hint__font-weight__error

--y-textarea__hint__font-weight__readonly

The font-weight of the hint text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: hint__fontStyle

Injectable

String Property

--y-textarea__hint__font-style

--y-textarea__hint__font-style__normal

--y-textarea__hint__font-style__hover

--y-textarea__hint__font-style__focus

--y-textarea__hint__font-style__active

--y-textarea__hint__font-style__disabled

--y-textarea__hint__font-style__error

--y-textarea__hint__font-style__readonly

The font-style of the font-style text. This can be set to normal, italic or oblique.

Name: hint__textTransform

Injectable

String Property

--y-textarea__hint__text-transform

--y-textarea__hint__text-transform__normal

--y-textarea__hint__text-transform__hover

--y-textarea__hint__text-transform__focus

--y-textarea__hint__text-transform__active

--y-textarea__hint__text-transform__disabled

--y-textarea__hint__text-transform__error

--y-textarea__hint__text-transform__readonly

The text-transformation of the hint text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: hint__textDecoration

Injectable

String Property

--y-textarea__hint__text-decoration

--y-textarea__hint__text-decoration__normal

--y-textarea__hint__text-decoration__hover

--y-textarea__hint__text-decoration__focus

--y-textarea__hint__text-decoration__active

--y-textarea__hint__text-decoration__disabled

--y-textarea__hint__text-decoration__error

--y-textarea__hint__text-decoration__readonly

The text-decoration of the hint text. This can be set to:

• strikethrough
• underline

Name: hint__fontSize

Injectable

UnitNumber Property

--y-textarea__hint__font-size

The font-size of the hint text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: hint__fontAlign

Injectable

String Property

--y-textarea__hint__font-align

The font-align of the hint text. This property moves the hint text to the desired position, it can be set to left, center or right.

Name: hint

String Property

--y-textarea__hint

The hint that is going to be displayed.

INDICATORread more

Name: indicator__color

Injectable

Color Property

--y-textarea__indicator__color

--y-textarea__indicator__color__normal

--y-textarea__indicator__color__hover

--y-textarea__indicator__color__focus

--y-textarea__indicator__color__active

--y-textarea__indicator__color__disabled

--y-textarea__indicator__color__error

--y-textarea__indicator__color__readonly

The color of the indicator. This can be set as a color from a palette or a custom hex color.

Name: indicator__height

Injectable

UnitNumber Property

--y-textarea__indicator__height

The height of the indicator. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Textarea

STATEread more

Name: disabled

Boolean Property

--y-textarea__disabled

This property can disable or enable the disabled-state of the Textarea-component.

Name: error

Boolean Property

--y-textarea__error

This property can disable or enable the error-state of the Textarea-component.

Name: readonly

Boolean Property

--y-textarea__readonly

This property can disable or enable the readonly-state of the Textarea-component.

ERRORread more

Name: errorMessage

String Property

--y-textarea__error-message

The message to be displayed, if an error occurs.

MISCread more

Name: dense

Boolean Property

--y-textarea__dense

This option will specify if the restriction for content should be dense or not.

Links

LABELread more

Name: sourceLinkLabel

String Property

--y-textarea__source-link-label

This property defines a link to another component by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent the label to be displayed.

CONTENTread more

Name: sourceLinkContent

String Property

--y-textarea__source-link-content

This property defines a link to another component by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent the content-text to be displayed.

HINTread more

Name: sourceLinkHint

String Property

--y-textarea__source-link-hint

This property defines a link to another component by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent the hint-text to be displayed.

Events

LIFECYCLEread more

Name: EvtInit

String Property

--y-textarea__-evt-init

This specifies the function to be called, when the Textarea is initialized.

INPUTread more

Name: EvtChanged

String Property

--y-textarea__-evt-changed

The event that is triggered when the text inside the input field is being editet.

Name: EvtKeyItem

String Property

--y-textarea__-evt-key-item

The event that is triggered when triggering a key of the keyboard while having the input focused.

Usage

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yTextarea in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations

Elevated

Flat

Outlined

Rounded

Plain

Elevated

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_ioshintarrow_forward_ioshint

stylearrow_forward_iosindicatorarrow_forward_iosindicator__height0px

Flat

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_ioshintarrow_forward_ioshint

stylearrow_forward_iosindicatorarrow_forward_iosindicator__height0px

Outlined

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderStyleTop__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleRight__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleBottom__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleLeft__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderWidthTop__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthRight__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthBottom__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthLeft__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderColorTop__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorRight__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorBottom__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorLeft__normal#44ddbb

stylearrow_forward_ioshintarrow_forward_ioshint

stylearrow_forward_iosindicatorarrow_forward_iosindicator__height0px

Rounded

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius20px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_ioshintarrow_forward_ioshint

stylearrow_forward_iosindicatorarrow_forward_iosindicator__height0px

Plain

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#44ddbb

stylearrow_forward_ioshintarrow_forward_ioshint

stylearrow_forward_iosindicatorarrow_forward_iosindicator__height0px

Special Variations

Beyond standard configurations, the yTextarea allows for advanced customization. Tailor the component for specific needs like user feedback forms with character limits or code input areas with monospace font styling.

No Label, Placeholder

Colorized

No Label, Placeholder

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_ioslabelarrow_forward_ioslabel

stylearrow_forward_ioshintarrow_forward_ioshint

stylearrow_forward_iosplaceholderarrow_forward_iosplaceholder

stylearrow_forward_ioscontentarrow_forward_iosvalue

stylearrow_forward_iosindicatorarrow_forward_iosindicator__height0px

stylearrow_forward_iosborderarrow_forward_iosborderStyleTop__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleRight__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleBottom__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleLeft__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderWidthTop__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthRight__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthBottom__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthLeft__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderColorTop__normal#000000

stylearrow_forward_iosborderarrow_forward_iosborderColorRight__normal#000000

stylearrow_forward_iosborderarrow_forward_iosborderColorBottom__normal#000000

stylearrow_forward_iosborderarrow_forward_iosborderColorLeft__normal#000000

Colorized

genericarrow_forward_iossizearrow_forward_iosminWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxWidth200px

genericarrow_forward_iossizearrow_forward_iosmaxHeight100px

stylearrow_forward_ioslabelarrow_forward_ioslabel'Insert Request'

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#E3F2FD

stylearrow_forward_iosborderarrow_forward_iosborderStyleTop__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleRight__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleBottom__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleLeft__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderWidthTop__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthRight__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthBottom__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthLeft__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderColorTop__normal#90CAF9

stylearrow_forward_iosborderarrow_forward_iosborderColorRight__normal#90CAF9

stylearrow_forward_iosborderarrow_forward_iosborderColorBottom__normal#90CAF9

stylearrow_forward_iosborderarrow_forward_iosborderColorleft__normal#90CAF9

stylearrow_forward_ioscontentarrow_forward_iostype'text

stylearrow_forward_ioshintarrow_forward_ioshint'Max 150 symbols'

Compared to the yInput component, it is not possible to request only number input here. This kind of validation has to be done manually via JavaScript.

Custom Validation and Mask Usage

Because there is no built in validation and mask features like in the yInput component, we have to create this functionality by ourselves. Via custom JavaScript create a yTextarea with custom validation for email input and apply a mask for phone number formatting. Implement dynamic validation feedback to guide user input.

Code example:

Textarea EvtChanged

// function onTextarea_2_EvtChanged (apiObject, component, eventData) {
// Assuming a yTextarea component with ID "emailTextarea" for email validation
const emailInput = component.get("style", "content", "value");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput)) {
  // Display validation error message
  component.set(
    "component",
    "error",
    "errorMessage",
    "Please enter a valid email address."
  );
} else {
  // Clear error message
  component.set("component", "error", "errorMessage", "");
}
// }

Handling Large Text with Auto-Expand

Configure yTextarea to automatically expand based on content, enhancing user experience for inputs like user-generated stories or extensive comments.

Code example:

Textarea EvtChanged

// function onTextarea_2_EvtChanged (apiObject, component, eventData) {
// Retrieve the current text from the textarea
const currentText = component.get("content", "value");
// Estimate the height required based on the text length
// This is a simplified example. Consider line breaks and other factors in a real implementation.
const lines = currentText.split("\n").length;
const lineHeight = 20; // Assuming each line requires 20 pixels
const padding = 20; // Top and bottom padding
const minHeight = 100; // Minimum height of the textarea
const newHeight = Math.max(minHeight, lines * lineHeight + padding);

// Adjust the height of the textarea based on the content
component.set("style", "size", "minHeight", `${newHeight}px`);
// }

These examples showcase the flexibility of yTextarea, catering to a wide range of use cases from simple text inputs to complex data entry forms with validation and formatting.

Creating a feedback form

The yTextarea can be used in many use-cases - for example a form to send out feedback via email.

How to:

1. Create a yButton.
2. Open the Detail Panel, proceed to Events, unfold Input and modify EvtClicked.
3. Insert the snippet from down below.

Code example:

The following example will read the value of your yTextarea and send it out via email.

Button EvtClicked

// async function onButton_2_EvtClicked (apiObject, component, eventData) {
const textare = apiObject.ui.getObject(3, "y-textarea", "y-page", 1);
const feedbackText = textarea.get("style", "content", "content");

if (feedbackText.length > 0) {
  await apiObject.email.sendUserMail({
    path: "[Folder in the mediamanager for your template]",
    template: "[Your template]",
    placeholderValues: `{'yeet:Feedback': ${feedbackText}}`,
    attachmentInfos: "[]",
    recipientAddress: "[A mail for recipient]",
    recipientName: "Lorem Ipsum",
    subject: "Feedback send, thank you!",
    userName: "testUser",
  });
} else {
  alert("Please provide a feedback text first, before sending empty emails.");
}
// }