TextInput class

Package:: @microsoft/teams.cards

Lets a user enter text.

Extends: InputElement$1

Constructors

Properties

inlineAction	The inline action for the input. Typically displayed to the right of the input. It is strongly recommended to provide an icon on the action (which will be displayed instead of the title of the action).
isMultiline	If `true`, allow multiple lines of input.
maxLength	Hint of maximum length characters to collect (may be ignored by some clients).
placeholder	Description of the input desired. Displayed when no text has been input.
regex	Regular expression indicating the required format of this text input.
style	Style hint for text input.
type
value	The initial value for this field.

Inherited Properties

errorMessage	Error message to display when entered input is invalid
fallback	Describes what to do when an unknown item is encountered or the requires of this or any children can't be met.
grid.area	the area of a `Layout.AreaGrid` layout in which an element should be displayed.
height	Specifies the height of the element.
horizontalAlignment	controls how the element should be horizontally aligned.
id	A unique identifier associated with the item
inputStyle	[SUPPORTED ONLY IN JAVASCRIPT SDK] Style hint for input fields. Allows input fields to appear as read-only but when user clicks/focuses on the field, it allows them to update those fields.
isRequired	Whether or not this input is required
isVisible	If false, this item will be removed from the visual tree.
label	Label for this input
labelPosition	[SUPPORTED ONLY IN JAVASCRIPT SDK] Determines the position of the label. It can take 'inline' and 'above' values. By default, the label is placed 'above' when label position is not specified.
labelWidth	[SUPPORTED ONLY IN JAVASCRIPT SDK] Determines the width of the label in percent like 40 or a specific pixel width like ‘40px’ when label is placed inline with the input. labelWidth would be ignored when the label is displayed above the input.
lang	The locale associated with the element.
requires	A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered.
separator	When `true`, draw a separating line at the top of the element.
spacing	Controls the amount of spacing between this element and the preceding element.
targetWidth	Controls for which card width the element should be displayed. If targetWidth isn't specified, the element is rendered at all card widths. Using targetWidth makes it possible to author responsive cards that adapt their layout to the available horizontal space.

Methods

withInlineAction(Action)
withMaxLength(number)
withMultiLine(boolean)
withOptions(TextInputOptions)
withPlaceholder(string)
withRegex(string)
withStyle(TextInputStyle)
withValue(string)

Inherited Methods

withError(string)
withFallback(Element$1 \| "drop" \| Omit<string, "drop">)
withGridArea(string)
withHeight("auto" \| "stretch" \| Omit<string \| number, "auto" \| "stretch">)
withHorizontalAlignment(HorizontalAlignment)
withId(string)
withInputStyle(InputStyle)
withIsVisible(boolean)
withLabel(string, InputLabelPosition, string \| number)
withLabelPosition(InputLabelPosition)
withLabelWidth(string \| number)
withLang(string)
withRequire(string, string)
withRequired(boolean)
withRequires(Record<string, string>)
withSeperator(boolean)
withSpacing(Spacing)
withTargetWidth(TargetWidth)

Constructor Details

TextInput(TextInputOptions)

new TextInput(options?: TextInputOptions)

Parameters

options: TextInputOptions

Property Details

inlineAction

The inline action for the input. Typically displayed to the right of the input. It is strongly recommended to provide an icon on the action (which will be displayed instead of the title of the action).

inlineAction?: Action

Property Value

Action

isMultiline

If true, allow multiple lines of input.

isMultiline?: boolean

Property Value

boolean

maxLength

Hint of maximum length characters to collect (may be ignored by some clients).

maxLength?: number

Property Value

number

placeholder

Description of the input desired. Displayed when no text has been input.

placeholder?: string

Property Value

string

regex

Regular expression indicating the required format of this text input.

regex?: string

Property Value

string

style

Style hint for text input.

style?: TextInputStyle

Property Value

TextInputStyle

type

type: "Input.Text"

Property Value

"Input.Text"

value

The initial value for this field.

value?: string

Property Value

string

Inherited Property Details

errorMessage

Error message to display when entered input is invalid

errorMessage?: string

Property Value

string

Inherited From InputElement$1.errorMessage

fallback

Describes what to do when an unknown item is encountered or the requires of this or any children can't be met.

fallback?: Element$1 | "drop" | Omit<string, "drop">

Property Value

Element | "drop" | Omit<string, "drop">

Inherited From InputElement$1.fallback

grid.area

the area of a Layout.AreaGrid layout in which an element should be displayed.

grid.area?: string

Property Value

string

Inherited From InputElement$1.grid.area

height

Specifies the height of the element.

height?: "auto" | "stretch" | Omit<string | number, "auto" | "stretch">

Property Value

"auto" | "stretch" | Omit<string | number, "auto" | "stretch">

Inherited From InputElement$1.height

horizontalAlignment

controls how the element should be horizontally aligned.

horizontalAlignment?: null | HorizontalAlignment

Property Value

null | HorizontalAlignment

Inherited From InputElement$1.horizontalAlignment

id

A unique identifier associated with the item

id?: string

Property Value

string

Inherited From InputElement$1.id

inputStyle

[SUPPORTED ONLY IN JAVASCRIPT SDK] Style hint for input fields. Allows input fields to appear as read-only but when user clicks/focuses on the field, it allows them to update those fields.

inputStyle?: InputStyle

Property Value

InputStyle

Inherited From InputElement$1.inputStyle

isRequired

Whether or not this input is required

isRequired?: boolean

Property Value

boolean

Inherited From InputElement$1.isRequired

isVisible

If false, this item will be removed from the visual tree.

isVisible?: boolean

Property Value

boolean

Inherited From InputElement$1.isVisible

label

Label for this input

label?: string

Property Value

string

Inherited From InputElement$1.label

labelPosition

[SUPPORTED ONLY IN JAVASCRIPT SDK] Determines the position of the label. It can take 'inline' and 'above' values. By default, the label is placed 'above' when label position is not specified.

labelPosition?: InputLabelPosition

Property Value

InputLabelPosition

Inherited From InputElement$1.labelPosition

labelWidth

[SUPPORTED ONLY IN JAVASCRIPT SDK] Determines the width of the label in percent like 40 or a specific pixel width like ‘40px’ when label is placed inline with the input. labelWidth would be ignored when the label is displayed above the input.

labelWidth?: string | number

Property Value

string | number

Inherited From InputElement$1.labelWidth

lang

The locale associated with the element.

lang?: string

Property Value

string

Inherited From InputElement$1.lang

requires

A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered.

requires?: Record<string, string>

Property Value

Record<string, string>

Inherited From InputElement$1.requires

separator

When true, draw a separating line at the top of the element.

separator?: boolean

Property Value

boolean

Inherited From InputElement$1.separator

spacing

Controls the amount of spacing between this element and the preceding element.

spacing?: Spacing

Property Value

Spacing

Inherited From InputElement$1.spacing

targetWidth

Controls for which card width the element should be displayed. If targetWidth isn't specified, the element is rendered at all card widths. Using targetWidth makes it possible to author responsive cards that adapt their layout to the available horizontal space.

targetWidth?: TargetWidth

Property Value

TargetWidth

Inherited From InputElement$1.targetWidth

Method Details

withInlineAction(Action)

function withInlineAction(value: Action): TextInput

Parameters

value: Action

Returns

TextInput

withMaxLength(number)

function withMaxLength(value: number): TextInput

Parameters

value: number

Returns

TextInput

withMultiLine(boolean)

function withMultiLine(value?: boolean): TextInput

Parameters

value: boolean

Returns

TextInput

withOptions(TextInputOptions)

function withOptions(value: TextInputOptions): TextInput

Parameters

value: TextInputOptions

Returns

TextInput

withPlaceholder(string)

function withPlaceholder(value: string): TextInput

Parameters

value: string

Returns

TextInput

withRegex(string)

function withRegex(value: string): TextInput

Parameters

value: string

Returns

TextInput

withStyle(TextInputStyle)

function withStyle(value: TextInputStyle): TextInput

Parameters

value: TextInputStyle

Returns

TextInput

withValue(string)

function withValue(value: string): TextInput

Parameters

value: string

Returns

TextInput

Inherited Method Details

withError(string)

function withError(value: string): TextInput

Parameters

value: string

Returns

TextInput

Inherited From InputElement$1.withError

withFallback(Element$1 | "drop" | Omit<string, "drop">)

function withFallback(value: Element$1 | "drop" | Omit<string, "drop">): TextInput

Parameters

value: Element | "drop" | Omit<string, "drop">

Returns

TextInput

Inherited From InputElement$1.withFallback

withGridArea(string)

function withGridArea(value: string)

Parameters

value: string

Inherited From InputElement$1.withGridArea

withHeight("auto" | "stretch" | Omit<string | number, "auto" | "stretch">)

function withHeight(value: "auto" | "stretch" | Omit<string | number, "auto" | "stretch">): TextInput

Parameters

value: "auto" | "stretch" | Omit<string | number, "auto" | "stretch">

Returns

TextInput

Inherited From InputElement$1.withHeight

withHorizontalAlignment(HorizontalAlignment)

function withHorizontalAlignment(value: HorizontalAlignment): TextInput

Parameters

value: HorizontalAlignment

Returns

TextInput

Inherited From InputElement$1.withHorizontalAlignment

withId(string)

function withId(value: string): TextInput

Parameters

value: string

Returns

TextInput

Inherited From InputElement$1.withId

withInputStyle(InputStyle)

function withInputStyle(value: InputStyle): TextInput

Parameters

value: InputStyle

Returns

TextInput

Inherited From InputElement$1.withInputStyle

withIsVisible(boolean)

function withIsVisible(value: boolean): TextInput

Parameters

value: boolean

Returns

TextInput

Inherited From InputElement$1.withIsVisible

withLabel(string, InputLabelPosition, string | number)

function withLabel(value: string, position?: InputLabelPosition, width?: string | number): TextInput

Parameters

value: string

position: InputLabelPosition

width: string | number

Returns

TextInput

Inherited From InputElement$1.withLabel

withLabelPosition(InputLabelPosition)

function withLabelPosition(value: InputLabelPosition): TextInput

Parameters

value: InputLabelPosition

Returns

TextInput

Inherited From InputElement$1.withLabelPosition

withLabelWidth(string | number)

function withLabelWidth(value: string | number): TextInput

Parameters

value: string | number

Returns

TextInput

Inherited From InputElement$1.withLabelWidth

withLang(string)

function withLang(value: string): TextInput

Parameters

value: string

Returns

TextInput

Inherited From InputElement$1.withLang

withRequire(string, string)

function withRequire(key: string, value: string): TextInput

Parameters

key: string

value: string

Returns

TextInput

Inherited From InputElement$1.withRequire

withRequired(boolean)

function withRequired(value?: boolean): TextInput

Parameters

value: boolean

Returns

TextInput

Inherited From InputElement$1.withRequired

withRequires(Record<string, string>)

function withRequires(value: Record<string, string>): TextInput

Parameters

value: Record<string, string>

Returns

TextInput

Inherited From InputElement$1.withRequires

withSeperator(boolean)

function withSeperator(value: boolean): TextInput

Parameters

value: boolean

Returns

TextInput

Inherited From InputElement$1.withSeperator

withSpacing(Spacing)

function withSpacing(value: Spacing): TextInput

Parameters

value: Spacing

Returns

TextInput

Inherited From InputElement$1.withSpacing

withTargetWidth(TargetWidth)

function withTargetWidth(value: TargetWidth): TextInput

Parameters

value: TargetWidth

Returns

TextInput

Inherited From InputElement$1.withTargetWidth

Share via

TextInput class

Constructors

Properties

Inherited Properties

Methods

Inherited Methods

Constructor Details

TextInput(TextInputOptions)

Parameters

Property Details

inlineAction

Property Value

isMultiline

Property Value

maxLength

Property Value

placeholder

Property Value

regex

Property Value

style

Property Value

type

Property Value

value

Property Value

Inherited Property Details

errorMessage

Property Value

fallback

Property Value

grid.area

Property Value

height

Property Value

horizontalAlignment

Property Value

id

Property Value

inputStyle

Property Value

isRequired

Property Value

isVisible

Property Value

label

Property Value

labelPosition

Property Value

labelWidth

Property Value

lang

Property Value

requires

Property Value

separator

Property Value

spacing

Property Value

targetWidth

Property Value

Method Details

withInlineAction(Action)

Parameters

Returns

withMaxLength(number)

Parameters

Returns

withMultiLine(boolean)

Parameters

Returns

withOptions(TextInputOptions)

Parameters

Returns

withPlaceholder(string)

Parameters

Returns

withRegex(string)

Parameters