Textarea

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import { userEvent, within } from '@storybook/testing-library'
import React, { useState } from 'react'
import styled from 'styled-components'
import { Stack } from '../Layout'
import { Textarea } from './Textarea'
export default {
title: 'Forms(フォーム)/Textarea',
component: Textarea,
}
const Template: Story = () => {
const [value, setValue] = useState('message👌')
const onChangeValue = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
setValue(e.currentTarget.value)
return (
<List>
<li>
<Label>
標準
<Textarea name="default" />
</Label>
</li>
<li>
<Label>
入力欄を自動で広げる(初期: 3行、最大: 10行)
<Textarea name="auto_resize" cols={35} rows={3} maxRows={10} autoResize />
</Label>
</li>
<li>
<Label>
幅指定
<Textarea name="width" width="100%" />
</Label>
</li>
<li>
<Label>
disabled
<Textarea name="disabled" disabled={true} />
</Label>
</li>
<li>
<Label>
エラー時
<Textarea name="error" error={true} />
</Label>
</li>
<li>
<Label>
最大文字数 (defaultValue)
<Textarea name="max_length_with_default_value" maxLength={140} defaultValue="message👌" />
</Label>
</li>
<li>
<Label>
最大文字数 (value)
<Textarea
name="max_length_with_value"
maxLength={140}
value={value}
onChange={onChangeValue}
/>
</Label>
</li>
<li>
<Label>
最大文字数 (decorators)
<Textarea
name="max_length_with_value_and_decorators"
maxLength={140}
value={value}
onChange={onChangeValue}
decorators={{
beforeMaxLengthCount: (txt) => `entry limit(${txt})`,
afterMaxLengthCount: (txt) => ` characters(${txt})`,
}}
/>
</Label>
</li>
</List>
)
}
export const All = Template.bind({})
export const RegInput = Template.bind({})
RegInput.play = async ({ canvasElement }) => {
const canvas = within(canvasElement)
const notResizableTextarea = await canvas.findByLabelText('標準')
// デフォルトでは入力欄が広がらないことを確認する
await userEvent.type(notResizableTextarea, 'hoge\n'.repeat(3), { delay: 0.1 })
const resizableTextarea = await canvas.findByLabelText(
'入力欄を自動で広げる(初期: 3行、最大: 10行)',
)
// 11行入力し、入力欄が10行以上広がらないことを確認する
await userEvent.type(resizableTextarea, 'hoge\n'.repeat(11), { delay: 0.1 })
}
const List = styled(Stack).attrs({ as: 'ul', gap: 1.5 })`
padding: 0 24px;
list-style: none;
`
const Label = styled(Stack).attrs({ as: 'label', gap: 0.25, align: 'flex-start' })``
処理中

Props

NameRequiredTypeDescription
error-false, true入力値にエラーがあるかどうか
width-string, numberコンポーネントの幅
autoFocus-false, true自動でフォーカスされるかどうか
autoResize-false, true自動で広がるかどうか
maxRows-number最大行数。超えるとスクロールする。初期値は無限
rows-number行数の初期値。省略した場合は2
decorators-DecoratorsType<"beforeMaxLengthCount" | "afterMaxLengthCount">コンポーネント内の文言を変更するための関数を設定
placeholder-string@deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。