Text Field

Control to input text.

Module

import '@capitec/omni-components/text-field';

content_copy

import { OmniTextField } from "@capitec/omni-components-react/text-field";

content_copy

Source

View on GitHub

Packages

@capitec/omni-components

@capitec/omni-components-react

Examples

Docs

Styles

Interactive

Max Length

Label

Hint

Error Label

Value

Clearable

Custom Clear Slot

Prefix

Suffix

Disabled

Interactive Max Length Label Hint Error Label Value Clearable Custom Clear Slot Prefix Suffix Disabled

Properties

Name	Attribute	Type	Description
noNativeKeyboard	no-native-keyboard	`boolean \| undefined`	Disables native on screen keyboards for the component.
maxLength	max-length	`number \| undefined`	Maximum character input length.
label	label	`string \| undefined`	Text label.
value	value	`string \| number \| Record<string, unknown> \| undefined`	Value entered into the form component.
data	data	`object \| undefined`	Data associated with the component.
hint	hint	`string \| undefined`	Hint message to assist the user.
error	error	`string \| undefined`	Error message guiding a user to correct a mistake.
disabled	disabled	`boolean`	Indicator if the component should be disabled.
clearable	clearable	`boolean`	Toggles the ability to clear the value of the component.
dir	dir	`string`	Used to set the base direction of text for display
lang	lang	`string`	Used to identify the language of text content on the web

Events

Name	Type	Description
change	`Event`

Slots

Name	Description
`loading_indicator`	Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called
`clear`	Replaces the icon for the clear slot.
`prefix`	Replaces the icon for the prefix slot.
`suffix`	Replaces the icon for the suffix slot.

Theme Variables

Name	Description
`--omni-theme-primary-color`	Theme primary color.
`--omni-theme-primary-hover-color`	Theme primary hover color.
`--omni-theme-primary-active-color`	Theme primary active color.
`--omni-theme-accent-color`	Theme accent color.
`--omni-theme-accent-hover-color`	Theme accent hover color.
`--omni-theme-accent-active-color`	Theme accent active color.
`--omni-theme-background-color`	Theme background color.
`--omni-theme-background-hover-color`	Theme background hover color.
`--omni-theme-background-active-color`	Theme background active color.
`--omni-theme-font-color`	Theme font color.
`--omni-theme-disabled-border-color`	Theme disabled border color.
`--omni-theme-disabled-background-color`	Theme disabled background color.
`--omni-theme-error-font-color`	Theme disabled background color.
`--omni-theme-error-border-color`	Theme error border color.
`--omni-theme-hint-font-color`	Theme hint font color.
`--omni-theme-inactive-color`	Theme inactive color.
`--omni-theme-box-shadow-color`	Theme inactive color.
`--omni-theme-font-family`	Theme font family.
`--omni-theme-font-size`	Theme font size.
`--omni-theme-font-weight`	Theme font weight.
`--omni-theme-border-radius`	Theme border radius.
`--omni-theme-border-width`	Theme border width.
`--omni-theme-box-shadow`	Theme box shadow.

Base Form Variables

Name	Description
`--omni-container-font-family`	Container font family.
`--omni-container-width`	Container width.
`--omni-container-height`	Container height.
`--omni-form-layout-border-radius`	Layout border radius.
`--omni-form-layout-background-color`	Layout background color.
`--omni-form-layout-height`	Layout height.
`--omni-form-layout-width`	Layout width.
`--omni-form-border-top`	Form border top.
`--omni-form-border-bottom`	Form border bottom.
`--omni-form-border-left`	Form border left.
`--omni-form-border-right`	Form border right.
`--omni-form-border-width`	Form border width.
`--omni-form-border-radius`	Form border radius.
`--omni-form-border-style`	Form border style.
`--omni-form-border-color`	Form border color.
`--omni-form-label-margin-left`	Form label margin left.
`--omni-form-label-text-align`	Form label text align.
`--omni-form-label-color`	Form label color.
`--omni-form-label-font-size`	Form label font size.
`--omni-form-label-font-weight`	Form label font weight.
`--omni-form-label-z-index`	Form label z-index.
`--omni-form-focussed-border-width`	Form focussed border width.
`--omni-form-focussed-border-color`	Form focussed border color.
`--omni-form-focussed-label-disabled-background-color`	Form focussed label disabled background color.
`--omni-form-focussed-label-transform-scale`	Form focussed label transform scale.
`--omni-form-focussed-label-margin-left`	Form focussed label left margin.
`--omni-form-focussed-label-color`	Form focussed label color.
`--omni-form-focussed-error-label-color`	Form focussed error label color.
`--omni-form-focussed-label-background-color`	Form focussed label background color.
`--omni-form-focussed-label-padding-left`	Form focussed label left.
`--omni-form-focussed-label-padding-right`	Form focussed label right.
`--omni-form-error-label-color`	Form error label color.
`--omni-form-error-border-color`	Form error border color.
`--omni-form-label-disabled-color`	Form label disabled color.
`--omni-form-disabled-border-color`	Form disabled border color.
`--omni-form-disabled-background-color`	Form disabled background color.
`--omni-form-disabled-focussed-label-background-color`	Form disabled label focussed background color.
`--omni-form-hint-label-font-color`	Form hint label font color.
`--omni-form-hint-label-font-family`	Form hint label font family.
`--omni-form-hint-label-font-size`	Form hint label font size.
`--omni-form-hint-label-font-weight`	Form hint label font weight.
`--omni-form-hint-label-padding-top`	Form hint label top padding.
`--omni-form-hint-label-padding-left`	Form hint label left padding.
`--omni-form-hint-label-border-width`	Form hint label border width.
`--omni-form-error-label-font-color`	Form error label font color.
`--omni-form-error-label-font-family`	Form error label font family.
`--omni-form-error-label-font-size`	Form error label font size.
`--omni-form-error-label-font-weight`	Form error label font weight.
`--omni-form-error-label-padding-top`	Form error label top padding.
`--omni-form-error-label-padding-left`	Form error label left padding.
`--omni-form-error-label-border-width`	Form error label border width.
`--omni-form-hover-color`	Form hover color.
`--omni-form-disabled-hover-color`	Form disabled hover color.
`--omni-form-error-hover-color`	Form error hover color.
`--omni-form-clear-control-margin-right`	Form clear control right margin.
`--omni-form-clear-control-margin-left`	Form clear control left margin.
`--omni-form-clear-control-width`	Form clear control width.
`--omni-form-clear-slot-color`	Form clear icon color.
`--omni-form-clear-slot-height`	Form clear slot height.
`--omni-form-clear-slot-width`	Form clear slot width.

Component Variables

Name	Description
`--omni-text-field-text-align`	Text field text align.
`--omni-text-field-font-color`	Text field font color.
`--omni-text-field-font-family`	Text field font family.
`--omni-text-field-font-size`	Text field font size.
`--omni-text-field-font-weight`	Text field font weight.
`--omni-text-field-padding`	Text field padding.
`--omni-text-field-height`	Text field height.
`--omni-text-field-width`	Text field width.
`--omni-text-field-disabled-font-color`	Text field disabled font color.
`--omni-text-field-autofill-hover-transition`	Text field input auto fill hover state transition.