Text input

Last updated: 2.0.0 (18/01/2024)

Usage

import { TextInput } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState("");

    return ( 
        <TextInput
            value={value}
            setValue={setValue}
        />
    )
}

Props

Extends GenericTextInputProps and GenericTextInputEventProps.

Property	Type	Description
type	TextInputType	The type of input to render. Defaults to text.
autoComplete	AutoCompleteBehaviour	The autocomplete behavior to use. Defaults to off.
multiple	boolean	For type=email, this specifies if this input accepts multiple values.
grow	boolean	Shorthand for flex-grow = 1.

TextInputType

Defines the type of input that will be rendered.

"text" | "password" | "email" | "number" | "tel" | "url" | "search";

AutoCompleteBehaviour

Defines the type of autocomplete behaviour that will be used.

"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "shipping" | "billing" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | "webauthn"