We are currently in alpha version.

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

Input

Inputs are essential UI elements that allow users to enter and edit single-line text. They provide a clear, intuitive way to capture user data, enhancing form interactions and data collection.

Basic input

Preview

Code

Optional properties

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

Property	Type	Description
`type`	`text` \| `number` \| `password` \| `email` \| `tel`	Defines the input type. `text` is a standard text input, `number` is a numeric input, `password` is a secure text input, `email` is an email input, and `tel` is a phone number input. Default is `text`.
`size`	`compact` \| `base`	Controls input sizing. `compact` has less padding, `base` follows the standard theme. Default is `base`.
`shape`	`flat` \| `pill` \| `curve`	Defines the input shape. `pill` is a fully rounded input, `curve` has rounded corners, and `flat` is a classic square-cornered input. Default is `flat`.
`icon`	string	Specifies a Font Awesome class for the input's icon (e.g., `fa-send`).
`iconPosition`	`left` \| `right`	Sets the icon's position relative to the input text. Defaults to `left`.
`id`	string	Defines the id of the input.
`label`	string	Defines the label attached to the input.
`placeholder`	string	Defines the placeholder of the input.
`helpText`	string	Defines the help text of the input.
`autoComplete`	string	Controls browser suggestions for input values.
`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 input component.

Supported directives

Selector	Directive name	Description
`zapFormFieldIcon`	ZapFormFieldIconDirective	Import a directive `ZapFormFieldIconDirective` into your component to enables adding any type of icon to a input, including SVGs, font-based icons, and more.
`zapFormFieldHelpText`	ZapFormFieldHelpTextDirective	Import a directive `ZapFormFieldHelpTextDirective` into your component to enable adding any help text to an input.
`zapLabel`	ZapLabelDirective	Import a directive `ZapLabelDirective` into your component to enable adding any label to an inout.

Example

Preview

Code

Username

Your username must be:

Unique
Be at least 6 characters long
Not contain any special characters

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 input. Can be `flat`, `curve`, or `pill`.
`size`	Defined the size of the input. Can be `compact` \| `base`

Colors

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

Property	Description
`bgColor`	Background color of the input.
`textColor`	Text color of the input.
`borderColor`	Border color of the input.
`labelColor`	Text color of the label
`placeholderColor`	Text color of the placeholder
`borderFocusColor`	Border color of the input when focused.
`bgFocusColor`	Background color of the input when focused.
`textFocusColor`	Text color of the input when focused.
`iconColor`	Color of 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 input's corners.
`paddingLeft`	Left padding of the input.
`paddingRight`	Right padding of the input.
`paddingTop`	Top padding of the input.
`paddingBottom`	Bottom padding of the input.
`padding`	Padding around the input's content.
`width`	Width of the input.
`height`	Height of the input.
`fontSize`	Font size of the input's text.
`fontWeight`	Font weight of the input's text.
`lineHeight`	Line height of the input's text.
`letterSpacing`	Letter spacing of the input'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
`iconFontSize`	Font size of the icon
`iconFontWeight`	Font weight of the icon
`iconLineHeight`	Line height of the icon
`iconLetterSpacing`	Letter spacing of the icon
`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