Text area

Last updated: 2.0.0 (18/01/2024)

Usage

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

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

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

Allow resize

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

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

    return ( 
        <Textarea
            value={value}
            setValue={setValue}
            
            minHeight={100}
            maxHeight={250}
            minWidth={300}
            maxWidth={500}
        />
    )
}

Props

Extends GenericTextInputProps and GenericTextInputEventProps.

Property	Type	Description
autoComplete	boolean	Whether the value of the input can be automatically completed by the browser/OS. Defaults to false.
spellCheck	boolean	Whether the input is subject to spell checking by the browser/OS. Defaults to true.
cols	number	Specifies the visible width of the input.
rows	number	Specifies the visible number of lines in the input.
wrap	LineWrapBehaviour	Specifies how the text in the input is to be wrapped.
resize	ResizeBehaviour	Specifies how the input can be resized. Defaults to "none".
minHeight	CSSProperties["minHeight"]	The minimum height of the input.
maxHeight	CSSProperties["maxHeight"]	The maximum height of the input.
minWidth	CSSProperties["minWidth"]	The minimum width of the input.
maxWidth	CSSProperties["maxWidth"]	The maximum width of the input.
grow	boolean	Shorthand for flex-grow = 1.

LineWrapBehaviour

"soft" | "hard" | "off"

ResizeBehaviour

"none" | "both" | "horizontal" | "vertical"