smarthr-ui-input · Design

input[type='text']やinput[type='number']などの代替としてテキストや数値を1行で入力させるコンポーネントです。テキスト・数値を1行で入力させるとき、フォームに入力欄を追加するときに使います。

import

import { Input } from 'smarthr-ui'

Props 名	型	デフォルト値	必須	説明
placeholder	string	-	-	@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。
type	string	-	-	input 要素の `type` 値
width	string \| number	-	-	コンポーネントの幅
autoFocus	boolean	-	-	オートフォーカスを行うかどうか
prefix	ReactNode	-	-	コンポーネント内の先頭に表示する内容
error	boolean	-	-	フォームにエラーがあるかどうか
suffix	ReactNode	-	-	コンポーネント内の末尾に表示する内容
bgColor	"BACKGROUND" \| "COLUMN" \| "BASE_GREY" \| "OVER_BACKGROUND" \| "HEAD" \| "BORDER" \| "ACTION_BACKGROUND"	-	-	背景色。readOnly を下地の上に載せる場合に使う

input, textarea, select など入力要素に name 属性を設定することを強制するルールです。

❌ NG:

// name属性が存在しないためNG
<RadioButton />
<Input type="radio" />
<input type="text" />
<Textarea />
<Select />

✅ OK:

<RadioButton name="hoge" />
<Input type="radio" name="fuga" />
<input type="text" name="any" />
<Textarea name="some" />
<Select name="piyo" />

入力要素をsmarthr-ui/FormControl、もしくはsmarthr-ui/Fieldsetで囲むことを促すルールです

❌ NG:

// FormControlで囲まれていないためNG
<Input />

// FormControlが複数の入力要素を持ってしまっているのでNG
<FormControl title="any heading">
  <Input />
  <Combobox />
</FormControl>

✅ OK:

<FormControl title="any heading">
  <Input />
</FormControl>

input, textarea 要素に maxLength 属性を設定することを禁止するルールです。

input や textarea などの入力要素に対してplaceholder属性を設定することを禁止するルールです

❌ NG:

<Input placeholder="hoge" />

✅ OK:

<>
  <Input />
  <Hint>hoge</Hint>
</>

詳細は eslint-plugin-smarthr の各ルール README を参照してください。

[must] 入力する内容をあらかじめ精査し、適切な幅になるよう調整して使用する
- Input は常に 1 行で表示されるため、十分な幅を確保する
- 入力する内容の文字数の予測が付く場合、過剰に幅を確保しない
- フォーム全体でレイアウトに統一性がなく感じられるときは、他の要素とのバランスを考慮して幅を調整する

[must] 入力項目の説明や例を載せる場合は FormControl の helpMessage や exampleMessage を用い別途表示する

[should] SearchInput はよくあるテーブルのオブジェクトの検索などに使用する
[must] SearchInput では tooltipMessage を使用して入力内容に対する説明を補足する
[must] 検索ボタンのあるフォーム（インクリメンタル検索をしないフォーム）内の SearchInput では、入力内容のクリアボタンで検索まで実行せず入力内容の削除にとどめる

[should] プレフィックス（prefix）の要素は入力内容を想起させるために使用する
- テキストの場合、一般的に内容に対して前方に置かれる単位（例: 米ドル）に用いる
[should] サフィックス（suffix）のアイコンは操作を想起させるため、または操作を提供するために使用する
- テキストの場合は入力内容を想起させるために使用し、一般的に内容に対して後方に置かれる単位（例: 日本円）に用いる
[must] 入力内容を想起させるアイコンは基本的に明確に必要なときにのみつける

[must] 何も入力されていない状態をデフォルトとする
- ユーザーの入力作業が向上したり、ミスを減らせる場合にはデフォルト値の設定を検討する
- 新規作成画面などで自動的にオブジェクト名を決められる場合は yyyy/mm/dd + オブジェクト名 のようにデフォルト値を設定するのを推奨する

[should] 通常は編集できるが一時的または権限の制約により編集できない場合に disabled を使用する
- 送信内容に含めたい値はフォームには表示しないか readOnly の使用を検討する
- そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討する