Interface MultiLineInputProps

Accepted values for text, background, and border colorization.

Essentially, all the well-known HTML properties are available, but with predefined values.

See below for an example using some of the properties:

Example:

<View
   backgroundColor="primary-300"
   borderColor="neutral-900"
   borderWidth="hairline"
>
 <Text color="neutral-900">My awesome text</Text>
</View>

Hierarchy

Properties

autoFocus? autofocus? backgroundColor? border? borderBottomStyle? borderBottomWidth? borderColor? borderHidden? borderLeftStyle? borderLeftWidth? borderRadius? borderRadiusLeftBottom? borderRadiusLeftTop? borderRadiusRightBottom? borderRadiusRightTop? borderRightStyle? borderRightWidth? borderStyle? borderTopStyle? borderTopWidth? borderWidth? color? contentColor? disabled? display? height? id? maxHeight? maxLength? maxWidth? minHeight? minLength? minWidth? name? onBlur? onChange onFocus? onSubmit? opacity? placeholder? readonly? required? spellcheck? transform? transition? value? visibility? visualState? width?

Properties

Optional autoFocus

autoFocus?: boolean

Indica se o MultiLineInput deve receber foco automaticamente. Example:

<MultiLineInput autoFocus={true} />

Optional autofocus

autofocus?: boolean

Quando definido como true, o campo de MultiLineInput receberá o foco automaticamente quando a página for carregada. Example:

     <MultiLineInput
           autofocus={true}
       />

Optional backgroundColor

backgroundColor?: string

Background color of component

Check the token table to know which values to use

Example:

   <backgroundColor="background-color" />

Optional border

border?: string

borderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.

Check the token table to know which values to use

Example:

   <borderColor="neutral-900" />

Optional borderBottomStyle

borderBottomStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderBottomWidth

borderBottomWidth?: string

borderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.

Check the token table to know which values to use

Example:

   <borderBottomWidth="hairline" />

Optional borderColor

borderColor?: string

Border Color of component

Check the token table to know which values to use

Example:

   <borderColor="neutral-900" />

Optional borderHidden

borderHidden?: boolean

Removes the borders of the MultiLineInput. Example:

<MultiLineInput borderHidden={true}/>

Optional borderLeftStyle

borderLeftStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderLeftWidth

borderLeftWidth?: string

borderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.

Check the token table to know which values to use

Example:

   <borderBottomWidth="hairline" />

Optional borderRadius

borderRadius?: string

borderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadius="micro" />

Optional borderRadiusLeftBottom

borderRadiusLeftBottom?: string

borderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusLeftBottom="micro" />

Optional borderRadiusLeftTop

borderRadiusLeftTop?: string

borderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusLeftTop="micro" />

Optional borderRadiusRightBottom

borderRadiusRightBottom?: string

borderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusRightBottom="micro" />

Optional borderRadiusRightTop

borderRadiusRightTop?: string

borderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusRightTop="micro" />

Optional borderRightStyle

borderRightStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderRightWidth

borderRightWidth?: string

borderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.

Check the token table to know which values to use

Example:

   <borderRightWidth="hairline" />

Optional borderStyle

borderStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderTopStyle

borderTopStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderTopWidth

borderTopWidth?: string

borderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.

Check the token table to know which values to use

Example:

   <borderTopWidth="hairline" />

Optional borderWidth

borderWidth?: string

The borderWidth determines the thickness of borders in the design system. It's a crucial property for defining the visual weight of elements.

Check the token table to know which values to use

Example:

   <borderWidth="hairline" />

Optional color

color?: string

Text color of components

Check the token table to know which values to use

Example:

   <color="neutral-900" />

Optional contentColor

contentColor?: boolean

"Use contrast colors for text and background"

Example:

 <View contentColors backgroundColor="primary-500" />

Optional disabled

disabled?: boolean

Indica se o MultiLineInput está desabilitado. Example:

<MultiLineInput disabled={true} />

Optional display

display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

Changes the element exhibition

Example:

<display="flex"/>

Optional height

height?: string | number

Adjust component height

Example:

   <height={100} />

Optional id

id?: string

"Fills the ID of the element (not very practical)."

Example:

 <View id="id" />

Optional maxHeight

maxHeight?: string | number

Adjust component maximum height

Example:

   <maxHeight={100} />

Optional maxLength

maxLength?: number

O limite de caracteres do MultiLineInput Example:

<MultiLineInput maxLength={10}/>

Optional maxWidth

maxWidth?: string | number

Adjust component maximum width

Example:

   <maxwidth={100} />

Optional minHeight

minHeight?: string | number

Adjust component minimum height

Example:

   <minHeight={100} />

Optional minLength

minLength?: number

Quando definido como true, o checkbox será exibido como marcado por padrão. Example:

     <MultiLineInput
           minLength={6}
       />

Optional minWidth

minWidth?: string | number

Adjust component minimum width

Example:

   <minWidth={100} />

Optional name

name?: string

Define o atributo name do elemento de MultiLineInput. Esse atributo é frequentemente usado em formulários para identificar os campos quando os dados são enviados. Example:

     <MultiLineInput
          name="username"
       />

Optional onBlur

onBlur?: ((e) => void)

Type declaration

    • (e): void

    • Função chamada quando o MultiLineInput perde o foco. Example:

      <MultiLineInput onBlur={this.myFuncion}/>

      Parameters

      • e: any

        O valor do MultiLineInput.

      Returns void

onChange

onChange: ((e) => void)

Type declaration

    • (e): void

    • Função chamada quando o valor do MultiLineInput é alterado. Example:

      <MultiLineInput onChange={this.myFuncion}/>

      Parameters

      • e: any

        O valor do MultiLineInput.

      Returns void

Optional onFocus

onFocus?: ((e) => void)

Type declaration

    • (e): void

    • Função chamada quando o MultiLineInput ganha o foco. Example:

      <MultiLineInput onFocus={this.myFuncion}/>

      Parameters

      • e: any

        O valor do MultiLineInput.

      Returns void

Optional onSubmit

onSubmit?: ((e) => void)

Type declaration

    • (e): void

    • Função chamada quando o MultiLineInput ganha é submetido. Example:

      <MultiLineInput onFocus={this.myFuncion}/>

      Parameters

      • e: any

        O valor do MultiLineInput.

      Returns void

Optional opacity

opacity?: "none" | "solid" | "light" | "half" | "heavy" | "transparent"

Changes the element opacity

Example:

<opacity="light" />

Optional placeholder

placeholder?: string

A dica ou instrução breve para o usuário sobre o valor esperado no campo de entrada. Example:

<MultiLineInput placeholder="text" />

Optional readonly

readonly?: boolean

Define se o campo de MultiLineInput é somente leitura. Quando definido como true, os usuários não poderão editar o conteúdo do campo. Example:

     <MultiLineInput
           readonly={true}
       />

Optional required

required?: boolean

Indica se o campo de MultiLineInput é obrigatório. Se definido como true, um aviso será exibido se o usuário tentar enviar o formulário sem preencher este campo. Example:

     <MultiLineInput
          required={true}
       />

Optional spellcheck

spellcheck?: boolean

Determina se o corretor ortográfico do navegador deve verificar o conteúdo do campo de input. Example:

     <MultiLineInput
            spellcheck={true}
       />

Optional transform

transform?: string

"Prepare a position transforming of element"

Example:

 <View transform="rotate(45deg)" />

Optional transition

transition?: string

"Prepare a transition of visual state change"

Example:

 <View transition="background-color 0.5s ease-in-out" />

Optional value

value?: any

O valor atual do MultiLineInput. Example:

<MultiLineInput value="text" />

Optional visibility

visibility?: "hidden" | "visible" | "collapse"

Changes the element visibility

Example:

<visibility="visible" />

Optional visualState

visualState?: "success" | "danger" | "warning"

"Determines the visual state of the component and its children."

Example:

 <View visualState="success" />

Optional width

width?: string | number

Adjust component width

Example:

   <width={100} />

Settings

Member Visibility

Theme

On This Page