Interface TextBoxProps

interface TextBoxProps {
    "aria-label"?: string;
    autoComplete?: TextBoxAutoCompleteValue;
    autoFocus?: boolean;
    defaultValue?: string;
    disabled?: boolean;
    form?: string;
    inputMode?:
        | "search"
        | "none"
        | "text"
        | "tel"
        | "url"
        | "email"
        | "numeric"
        | "decimal";
    list?: string;
    max?: string;
    maxLength?: number;
    min?: string;
    minLength?: number;
    name?: string;
    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
    pattern?: string;
    placeholder?: string;
    ref?: Ref<HTMLInputElement>;
    required?: boolean;
    size?: "medium" | "small" | "large";
    textTransform?: "uppercase";
    title?: string;
    type?:
        | "search"
        | "text"
        | "tel"
        | "url"
        | "email"
        | "date"
        | "password"
        | "datetime-local";
    value?: string;
}

Properties

aria-label? autoComplete? autoFocus? defaultValue? disabled? form? inputMode? list? max? maxLength? min? minLength? name? onChange? onKeyDown? pattern? placeholder? ref? required? size? textTransform? title? type? value?

Properties

Optionalaria-label

"aria-label"?: string

OptionalautoComplete

autoComplete?: TextBoxAutoCompleteValue

OptionalautoFocus

autoFocus?: boolean

OptionaldefaultValue

defaultValue?: string

Optionaldisabled

disabled?: boolean

Optionalform

form?: string

OptionalinputMode

inputMode?:
    | "search"
    | "none"
    | "text"
    | "tel"
    | "url"
    | "email"
    | "numeric"
    | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Optionallist

list?: string

Used for datalists. May be removed in the future. We still need to evaluate if this is a good way to do it.

Optionalmax

max?: string

Remarks

Don't use this. It is intended for internal use for DateInput.

OptionalmaxLength

maxLength?: number

Optionalmin

min?: string

Remarks

Don't use this. It is intended for internal use for DateInput.

OptionalminLength

minLength?: number

Optionalname

name?: string

OptionalonChange

onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void

OptionalonKeyDown

onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void

Optionalpattern

pattern?: string

Optionalplaceholder

placeholder?: string

Try to avoid using placeholders as labels:

Example: Consider using this instead:

	<TextBoxLabel label="Betreff">
		<TextBox />
	</TextBoxLabel>

Optional Internalref

ref?: Ref<HTMLInputElement>

Remarks

For internal use only.

Optionalrequired

required?: boolean

Optionalsize

size?: "medium" | "small" | "large"

OptionaltextTransform

textTransform?: "uppercase"

Optionaltitle

title?: string

Optionaltype

type?:
    | "search"
    | "text"
    | "tel"
    | "url"
    | "email"
    | "date"
    | "password"
    | "datetime-local"

Remarks

  • Don't use date or datetime-local. Use the DateInput component instead.

Optionalvalue

value?: string

value and onChange are optional because we want to be able to use the control in an uncontrolled manner as well (for example, in forms)

Settings

Member Visibility

On This Page

Properties