We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Textarea

Textareas are versatile UI elements that allow users to enter multi-line text. They provide a flexible, intuitive way to capture detailed input, enhancing form usability and user expression.

Basic textarea

Message

html

Optional properties

Use the properties below to style the textarea and copy the code to your project. Try clicking on them.

Property	Type	Description
`shape`	`flat` \| `curve`	Defines the textarea's shape. `curve` has rounded corners, and `flat` is a classic square-cornered textarea. Default is `flat`.
`resize`	`none` \| `vertical` \| `horizontal` \| `auto`	Defines the textarea's resizing. `none` prevents resizing, `vertical` allows vertical resizing, `horizontal` allows horizontal resizing, and `auto` allows resizing in both directions . Default is `none`.
`id`	string	Defines the id of the textarea.
`label`	string	Defines the label attached to the textarea.
`helpText`	string	Defines the help text attached to the textarea.
`placeholder`	string	Defines the placeholder of the textarea.
`placeholder`	string	Defines the placeholder of the textarea.
`rows`	string	Defines the default number of rows in the textarea.
`customErrorMessages`	string	Provides the ability to set custom error messages.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the textarea component.

Supported directives

These are optional directives for radio content header only

Selector	Directive name	Description
`zapLabel`	ZapLabelDirective	Import a directive `ZapLabelDirective` into your component to enable adding any label to a textarea.
`zapFormFieldHelpText`	ZapFormFieldHelpTextDirective	Import a directive `ZapFormFieldHelpTextDirective` into your component to enable adding any help text to a textarea.

Example

Preview

Code

Provide a description

Press enter to send

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape and Size

Property	Description
`shape`	Defines the shape of the textarea. Can be `flat`, `curve` or `pill`.

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the textarea.
`textColor`	Text color of the textarea.
`borderColor`	Border color of the textarea.
`labelColor`	Text color of the label
`placeholderColor`	Text color of the placeholder
`bgHoverColor`	Background color of the textarea when hovered.
`borderHoverColor`	Border color of the textarea when hovered.
`textHoverColor`	Text color of the textarea when hovered.
`bgFocusColor`	Background color of the textarea when focused.
`borderFocusColor`	Border color of the textarea when focused.
`ringFocusColor`	Ring color of the textarea when focused.
`textFocusColor`	Text color of the textarea when focused.
`iconColor`	Color for the icon
`helpTextColor`	Text color of the help text

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the checkbox's corners.
`paddingLeft`	Left padding of the checkbox.
`paddingRight`	Right padding of the checkbox.
`paddingTop`	Top padding of the checkbox.
`paddingBottom`	Bottom padding of the checkbox.
`padding`	Padding around the checkbox's content.
`width`	Width of the checkbox.
`height`	Height of the checkbox.
`fontSize`	Font size of the checkbox's text.
`fontWeight`	Font weight of the checkbox's text.
`lineHeight`	Line height of the checkbox's text.
`letterSpacing`	Letter spacing of the checkbox's text.
`labelFontSize`	Font size of the label
`labelFontWeight`	Font weight of the label
`labelLineHeight`	Line height of the label
`labelLetterSpacing`	Letter spacing of the label
`placeholderFontSize`	Font size of the placeholder
`placeholderFontWeight`	Font weight of the placeholder
`placeholderLineHeight`	Line height of the placeholder
`placeholderLetterSpacing`	Letter spacing of the placeholder
`helpTextFontSize`	Font size of the help text
`helpTextFontWeight`	Font weight of the help text
`helpTextLineHeight`	Line height of the help text
`helpTextLetterSpacing`	Letter spacing of the help text
`iconFontSize`	Font size of the icon
`iconFontWeight`	Font weight of the icon
`iconLineHeight`	Line height of the icon
`iconLetterSpacing`	Letter spacing of the icon