본문으로 건너뛰기

Textarea

Form 컴포넌트와 같이 사용되는 textarea 형식의 컴포넌트입니다.

기본 사용이 Input 컴포넌트와 동일합니다. (mint-ui validate 포함)

export function TextareaBasic(){

const [data, setData] = useState({
aaa:'a',
})

return <Frame>
<div>data.aaa = {data.aaa}</div>
<div>---------------------</div>
<Form formId="my-form" data={data} setData={setData}>
<Flex flexGap="10px">
<span>
aaa :
{/* data.aaa 와 바인딩 */}
{/* a~z 글자만 입력 허용 */}
{/* maxLength = 30 */}
<TextArea targetId='aaa'
validCharacter={/[a-z]/}
maxLength={30}
/>
</span>
</Flex>
</Form>
<Button type="submit" form="my-form">전송</Button>
</Frame>
}

textarea 엘레먼트의 속성을 동일하게 가지므로 maxLength 와 같은 textarea 의 속성도 사용 가능합니다.

속성 설명

targetId

targetId = keyof T

Form 에 바인딩된 T 타입에 대한 속성을 targetId 에 지정합니다. 해당 속성과 textarea 가 바인딩됩니다.

(optional) validValue

Input 컴포넌트의 validValue 와 같습니다.

(optional) validCharacter

Input 컴포넌트의 validValue 와 같습니다.