Skip to main content

TextFabric component

Component for rendering a single-line text input control.

📝 Signature​

TextFabric(props: {
styles: {
backgroundColor: string;
borderColor: string;
borderSize?: number;
roundness?: number;
textColor?: string;
errorColor: string;
scale?: number;
};
id?: string;
placeholder?: string;
required?: boolean;
disabled?: boolean;
readOnly?: boolean;
error?: boolean;
tabIndex?: number;
maxLength?: number;
value?: string | Value;
ariaDescribedBy?: string;
autoComplete?: string;
suggestions?: string[];
onChange?: (value: string) => string | void;
onFocus?: (e: FocusEvent) => string | void;
onBlur?: (e: FocusEvent) => string | void;
onAutoFocus?: (el: HTMLInputElement | null) => void;
onSubmit?: () => void;
onCancel?: () => void;
}): JSX.Element

📇 Props​

NameTypeOptionalDescription
stylesobjectNoSpecifies the styles for the input component. Supports the following styles:
- backgroundColor: Background color for the input control;
- borderColor: Border color for the input control;
- borderSize: Optional border size in pixels for the input control;
- roundness: Optional roundness in pixels for the input control;
- textColor: Optional text color for the input control;
- errorColor: Error color for the input control;
- scale: Optional scale factor for the input control (defaults to 1).
idstringYesOptional identifier for the component.
placeholderstringYesOptional placeholder that is shown when there is no value entered (defaults to +1 (201) 555-5555).
requiredbooleanYesSpecifies if the component is required.
disabledbooleanYesSpecifies if the component is disabled.
readOnlybooleanYesSpecifies if the component is read-only.
errorbooleanYesSpecifies if the component has an error.
tabIndexnumberYesSpecifies the tabindex for the component.
maxLengthnumberYesSpecifies the maximum characters that can be entered in the input control.
valuestring | ValueYesSpecifies the value for the component. When a string is specified, this is the initial value for the input control. When a Value is supplied, this initial value is retrieved from the Value instance. Changes made in the input control are automatically reflected to the Value instance.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
autoCompletestringYesSpecifies the autocomplete attribute of the input control.
suggestions string[]YesSpecifies the datalist to add suggestions to the component.
onChange(value: string) => string | voidYesInvoked when the value of the component is changed.
onFocus(e: FocusEvent) => string | voidYesInvoked when the component gets focus.
onBlur(e: FocusEvent) => string | voidYesInvoked when the component loses focus.
onAutoFocus(el: HTMLInputElement | null) => voidYesInvoked when the HTML element of the component is available for auto-focus.
onSubmit() => voidYesInvoked when the user presses the Shift + Enter key combination or the Tab key (this event is often used to go to the next input control in a form).
onCancel() => voidYesInvoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩ī¸ Return value​

Returns the JSX.Element for the component.

👩‍đŸ’ģ Example​

import { TextFabric } from "tripetto-runner-fabric/components/text";

const TextFabricExample = () => (
<TextFabric
styles={{
backgroundColor: "white",
borderColor: "black",
errorColor: "red"
}}
onChange={(value) => console.log(`Entered text: ${value}`)}
/>
);