Password Field
Password input control.
Module
import '@capitec/omni-components/password-field';import { OmniPasswordField } from "@capitec/omni-components-react/password-field";Source
@capitec/omni-components
Properties
| Name | Attribute | Type | Description |
|---|---|---|---|
| value | value | |
Override for the value property inherited from the OmniFormElement component with reflect set to false. |
| noNativeKeyboard | no-native-keyboard | |
Disables native on screen keyboards for the component. |
| maxLength | max-length | |
Maximum character input length. |
| label | label | |
Text label. |
| data | data | |
Data associated with the component. |
| hint | hint | |
Hint message to assist the user. |
| error | error | |
Error message guiding a user to correct a mistake. |
| disabled | disabled | |
Indicator if the component should be disabled. |
| clearable | clearable | |
Toggles the ability to clear the value of the component. |
| dir | dir | |
Used to set the base direction of text for display |
| lang | lang | |
Used to identify the language of text content on the web |
Events
| Name | Type | Description |
|---|---|---|
| change | |
Slots
| Name | Description |
|---|---|
|
Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called |
|
Replaces the icon for the clear slot. |
|
Replaces the icon for the prefix slot. |
|
Replaces the icon for the suffix slot. |
|
Replaces the icon for the password value hidden state. |
|
Replaces the icon for the checked value visible state. |
Theme Variables
| Name | Description |
|---|---|
|
Theme primary color. |
|
Theme primary hover color. |
|
Theme primary active color. |
|
Theme accent color. |
|
Theme accent hover color. |
|
Theme accent active color. |
|
Theme background color. |
|
Theme background hover color. |
|
Theme background active color. |
|
Theme font color. |
|
Theme disabled border color. |
|
Theme disabled background color. |
|
Theme disabled background color. |
|
Theme error border color. |
|
Theme hint font color. |
|
Theme inactive color. |
|
Theme inactive color. |
|
Theme font family. |
|
Theme font size. |
|
Theme font weight. |
|
Theme border radius. |
|
Theme border width. |
|
Theme box shadow. |
Base Form Variables
| Name | Description |
|---|---|
|
Container font family. |
|
Container width. |
|
Container height. |
|
Layout border radius. |
|
Layout background color. |
|
Layout height. |
|
Layout width. |
|
Form border top. |
|
Form border bottom. |
|
Form border left. |
|
Form border right. |
|
Form border width. |
|
Form border radius. |
|
Form border style. |
|
Form border color. |
|
Form label margin left. |
|
Form label text align. |
|
Form label color. |
|
Form label font size. |
|
Form label font weight. |
|
Form label z-index. |
|
Form focussed border width. |
|
Form focussed border color. |
|
Form focussed label disabled background color. |
|
Form focussed label transform scale. |
|
Form focussed label left margin. |
|
Form focussed label color. |
|
Form focussed error label color. |
|
Form focussed label background color. |
|
Form focussed label left. |
|
Form focussed label right. |
|
Form error label color. |
|
Form error border color. |
|
Form label disabled color. |
|
Form disabled border color. |
|
Form disabled background color. |
|
Form disabled label focussed background color. |
|
Form hint label font color. |
|
Form hint label font family. |
|
Form hint label font size. |
|
Form hint label font weight. |
|
Form hint label top padding. |
|
Form hint label left padding. |
|
Form hint label border width. |
|
Form error label font color. |
|
Form error label font family. |
|
Form error label font size. |
|
Form error label font weight. |
|
Form error label top padding. |
|
Form error label left padding. |
|
Form error label border width. |
|
Form hover color. |
|
Form disabled hover color. |
|
Form error hover color. |
|
Form clear control right margin. |
|
Form clear control left margin. |
|
Form clear control width. |
|
Form clear icon color. |
|
Form clear slot height. |
|
Form clear slot width. |
Component Variables
| Name | Description |
|---|---|
|
Password field control padding right. |
|
Password field control padding left. |
|
Password field control padding top. |
|
Password field control padding bottom. |
|
Password field slot icon color. |
|
Password field slot width. |
|
Password field slot height. |
|
Password field text align. |
|
Password field font color. |
|
Password field font family. |
|
Password field font size. |
|
Password field font weight. |
|
Password field padding. |
|
Password field height. |
|
Password field width. |
|
Password field disabled font color. |
|
Password field error font color. |