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 와 같습니다.