Skip to main content

InputFabric component

Base component for rendering an input control.

📝 Signature​

InputFabric(props: {
type: "text" | "email" | "url" | "password" | "tel" | "number";
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;
inputMode?: "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
autoComplete?: string;
list?: 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
type"text" | "email" | "url" | "password" | "tel" | "number"NoSpecifies the type of the input component.
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.
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.
inputMode"text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"YesSpecifies the inputmode of the input control.
autoCompletestringYesSpecifies the autocomplete attribute of the input control.
liststringYesSpecifies the identifier of a datalist.
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 { InputFabric } from "tripetto-runner-fabric/components/input";

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