Input

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import * as React from 'react'
import styled, { css } from 'styled-components'
import { Theme, useTheme } from '../../hooks/useTheme'
import { FaSearchIcon } from '../Icon'
import { CurrencyInput } from './CurrencyInput'
import { Input } from './Input'
import { SearchInput } from './SearchInput'
export default {
title: 'Forms(フォーム)/Input',
component: Input,
subcomponents: { CurrencyInput, SearchInput },
parameters: {
withTheming: true,
},
}
export const All: Story = () => {
const theme = useTheme()
return (
<List>
<li>
<Txt>text</Txt>
<Input name="text" type="text" defaultValue="string" />
</li>
<li>
<Txt>number</Txt>
<Input name="number" type="number" defaultValue="1" />
</li>
<li>
<Txt>password</Txt>
<Input name="password" type="password" defaultValue="password" />{' '}
</li>{' '}
<li>
<Txt>width (with %)</Txt>
<Input name="width_with_percent" defaultValue="width: 100%" width="100%" />
</li>
<li>
<Txt>width (with px)</Txt>
<Input name="width_with_px" defaultValue="width: 100px" width="100px" />
</li>
<li>
<Txt>onChange</Txt>
<Input name="onChange" onChange={action('onChange!!')} />
</li>
<li>
<Txt>onBlur</Txt>
<Input name="onBlur" onBlur={action('onBlur!!')} />
</li>
<li>
<Txt>disabled</Txt>
<Input name="disabled" disabled={true} defaultValue="これは disabled なテキスト" />
</li>
<li>
<Txt>error</Txt>
<Input name="error" error={true} />
</li>
<li>
<Txt>disabled and error</Txt>
<Input name="disabled" disabled={true} error={true} />
<Note themes={theme}> `disabled` takes precedence over `error`</Note>
</li>
<li>
<Txt>prefix</Txt>
<Input name="prefix" prefix={<FaSearchIcon />} />
</li>
<li>
<Txt>suffix</Txt>
<Input name="suffix" suffix={<FaSearchIcon />} />
</li>
<li>
<Txt>extending style (width 50%)</Txt>
<StyledInput name="extending_style" />
</li>
</List>
)
}
All.storyName = 'all'
export const Currency: Story = () => {
const [value, setValue] = React.useState('1234567890')
return (
<Wrapper>
<Txt>currency (add comma to integer every 3 digits)</Txt>
<CurrencyInput
name="currency"
value={value}
onChange={(e) => {
action('changed')(e)
setValue(e.target.value)
}}
onFormatValue={(formatted) => {
action('formatted')(formatted)
setValue(formatted)
}}
/>
</Wrapper>
)
}
Currency.storyName = 'CurrencyInput'
export { Default as SearchInput } from './SearchInput/SearchInput.stories'
const List = styled.ul`
padding: 0 24px;
list-style: none;
& > li:not(:first-child) {
margin-top: 16px;
}
`
const Txt = styled.p`
margin: 0 0 8px;
`
const StyledInput = styled(Input)`
width: 50%;
`
const Note = styled.div<{ themes: Theme }>`
${({ themes }) => css`
margin-top: 8px;
color: ${themes.color.TEXT_GREY};
`}
`
const Wrapper = styled.div`
padding: 24px;
`
処理中

Props

NameRequiredTypeDescription
type-stringinput 要素の `type` 値
error-false, trueフォームにエラーがあるかどうか
width-string, numberコンポーネントの幅
autoFocus-false, trueオートフォーカスを行うかどうか
prefix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalコンポーネント内の先頭に表示する内容
suffix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalコンポーネント内の末尾に表示する内容
placeholder-string@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。