SearchInput

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import React from 'react'
import styled, { css } from 'styled-components'
import { Stack } from '../../Layout'
import { SearchInput } from './SearchInput'
export const Default: Story = () => (
<Container>
<div>
<p>主に入力欄に対する説明をレイアウト上配置できない場合の利用を想定しています。</p>
<SearchInput
name="default"
tooltipMessage="氏名、ヨミガナ、社員番号で検索できます。スペース区切りでAND検索ができます。"
/>
</div>
<div>
<p>アイコンの代替テキストを設定</p>
<SearchInput
name="default"
tooltipMessage="氏名、ヨミガナ、社員番号で検索できます。スペース区切りでAND検索ができます。"
decorators={{ iconAlt: (txt) => `search.(${txt})` }}
/>
</div>
</Container>
)
Default.storyName = 'SearchInput'
const Container = styled(Stack)`
${({ theme: { space } }) => css`
padding: ${space(2)};
`}
`
処理中

Props

type
string

input 要素の type

placeholder非推奨
string

@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。

error
falsetrue

フォームにエラーがあるかどうか

width
stringnumber

コンポーネントの幅

autoFocus
falsetrue

オートフォーカスを行うかどうか

decorators
DecoratorsType<"iconAlt">
suffix
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>ReactFragmentReactPortal

コンポーネント内の末尾に表示する内容

tooltipMessage必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>ReactFragmentReactPortal

入力欄の説明を紐付けるツールチップに表示するメッセージ