FormGroup

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import styled, { css } from 'styled-components'
import { Input } from '../Input'
import { FormGroup } from './FormGroup'
export default {
title: 'Forms(フォーム)/FormGroup',
component: FormGroup,
parameters: {
withTheming: true,
},
}
type SampleChildrenProps = {
id1?: string
id2?: string
disabled?: boolean
}
const SampleChildren: React.VFC<SampleChildrenProps> = ({ id1, id2, disabled }) => {
return (
<SampleWrapper>
<SampleFormGroup
title="first name"
titleType="subSubBlockTitle"
innerMargin="XXS"
htmlFor={id1}
disabled={disabled}
>
<Input name="id1" id={id1} disabled={disabled} />
</SampleFormGroup>
<SampleFormGroup
title="last name"
titleType="subSubBlockTitle"
innerMargin="XXS"
htmlFor={id2}
disabled={disabled}
>
<Input name="id2" id={id2} disabled={disabled} />
</SampleFormGroup>
</SampleWrapper>
)
}
const SampleStatusLabelProps = [
{
type: 'red' as const,
children: 'label 1' as const,
},
{
type: 'blue' as const,
children: 'label 2' as const,
},
]
export const All: Story = () => {
return (
<Wrapper>
<Title>default</Title>
<Body>
<FormGroup title="Title" titleType="blockTitle" role="group">
<SampleChildren id1="id_1-1" id2="id_1-2" />
</FormGroup>
</Body>
<Title>with status label</Title>
<Body>
<FormGroup
title="Title"
titleType="blockTitle"
statusLabelProps={SampleStatusLabelProps}
role="group"
>
<SampleChildren id1="id_2-1" id2="id_2-2" />
</FormGroup>
</Body>
<Title>with help message</Title>
<Body>
<FormGroup
title="Title"
titleType="blockTitle"
helpMessage="help message text"
role="group"
>
<SampleChildren id1="id_3-1" id2="id_3-2" />
</FormGroup>
</Body>
<Title>with error messages</Title>
<Body>
<FormGroup
title="Title"
titleType="blockTitle"
statusLabelProps={SampleStatusLabelProps}
errorMessages={['error message 1', 'error message 2']}
role="group"
>
<SampleChildren id1="id_4-1" id2="id_4-2" />
</FormGroup>
</Body>
<Title>with all options</Title>
<Body>
<FormGroup
title="Title"
titleType="blockTitle"
statusLabelProps={SampleStatusLabelProps}
helpMessage="help message text"
errorMessages={['error message 1', 'error message 2']}
role="group"
>
<SampleChildren id1="id_5-1" id2="id_5-2" />
</FormGroup>
</Body>
<Title>disabled</Title>
<Body>
<FormGroup
title="Title"
titleType="blockTitle"
statusLabelProps={SampleStatusLabelProps}
helpMessage="help message text"
errorMessages="error message"
disabled
role="group"
>
<SampleChildren id1="id_6-1" id2="id_6-2" disabled />
</FormGroup>
</Body>
</Wrapper>
)
}
All.storyName = 'all'
const Wrapper = styled.dl`
display: block;
padding: 24px;
margin: 0;
`
const Title = styled.dt(
({ theme }) => css`
display: block;
padding: 0;
margin: 0 0 16px;
color: ${theme.color.TEXT_GREY};
font-style: italic;
`,
)
const Body = styled.dd`
display: block;
padding: 0;
margin: 0 0 32px;
`
const SampleWrapper = styled.div`
display: flex;
align-items: flex-start;
`
const SampleFormGroup = styled(FormGroup)`
margin-right: 16px;
`
処理中

Props

NameRequiredTypeDescription
titletruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalグループのタイトル名
titleType-"screenTitle", "sectionTitle", "blockTitle", "subBlockTitle", "subSubBlockTitle"タイトルの見出しのタイプ
htmlFor-stringlabel 要素に適用する `htmlFor` 値
labelId-stringlabel 要素に適用する `id` 値
innerMargin-"XXS", "XS", "S"タイトルと子要素の間のマージン
statusLabelProps-(Props & ElementProps)[]タイトルの隣に表示する `StatusLabel` の Props の配列
helpMessage-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalタイトルの下に表示するヘルプメッセージ
errorMessages-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal, ReactNode[]タイトルの下に表示するエラーメッセージ
disabled-false, true`true` のとき、文字色を `TEXT_DISABLED` にする
className-stringコンポーネントに適用するクラス名