⭐️

【Polaris和訳】Components/Forms⑦

2021/11/06に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Components/Formsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Forms⑦

Text field

テキストフィールドは、マーチャントが入力できる入力フィールドです。さまざまなオプションがあり、数字を含む複数のテキストフォーマットをサポートしています。

Web

例

Default text field

想定される入力が短い場合に、マーチャントがテキスト入力を行えるようにするために使用します。長い入力の場合は、auto grow または multiline オプションを使用してください。

React

function TextFieldExample() {
  const [value, setValue] = useState('Jaded Pixel');

  const handleChange = useCallback((newValue) => setValue(newValue), []);

  return (
    <TextField
      label="Store name"
      value={value}
      onChange={handleChange}
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField2Label" for="PolarisTextField2" class="Polaris-Label__Text">Store name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField2" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField2Label" aria-invalid="false" value="Jaded Pixel">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Number field

入力テキストが数字である場合に使用します。

React

function NumberFieldExample() {
  const [value, setValue] = useState('1');

  const handleChange = useCallback((newValue) => setValue(newValue), []);

  return (
    <TextField
      label="Quantity"
      type="number"
      value={value}
      onChange={handleChange}
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField4Label" for="PolarisTextField4" class="Polaris-Label__Text">Quantity</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField4" autocomplete="off" class="Polaris-TextField__Input" type="number" aria-labelledby="PolarisTextField4Label" aria-invalid="false" value="1">
          <div class="Polaris-TextField__Spinner" aria-hidden="true">
            <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
              <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m15 12-5-5-5 5h10z"></path>
                  </svg></span></div>
            </div>
            <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
              <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m5 8 5 5 5-5H5z"></path>
                  </svg></span></div>
            </div>
          </div>
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Email field

メールアドレスを入力する場合に使用します。

React

function EmailFieldExample() {
  const [value, setValue] = useState('bernadette.lapresse@jadedpixel.com');

  const handleChange = useCallback((newValue) => setValue(newValue), []);

  return (
    <TextField
      label="Email"
      type="email"
      value={value}
      onChange={handleChange}
      autoComplete="email"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField6Label" for="PolarisTextField6" class="Polaris-Label__Text">Email</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField6" autocomplete="email" class="Polaris-TextField__Input" type="email" aria-labelledby="PolarisTextField6Label" aria-invalid="false" value="bernadette.lapresse@jadedpixel.com">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Multiline text field

想定される入力が 1 行以上になる場合に使用します。フィールドは、追加のテキストに合わせて自動的に大きくなります。

React

function MultilineFieldExample() {
  const [value, setValue] = useState('1776 Barnes Street\nOrlando, FL 32801');

  const handleChange = useCallback((newValue) => setValue(newValue), []);

  return (
    <TextField
      label="Shipping address"
      value={value}
      onChange={handleChange}
      multiline={4}
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField8Label" for="PolarisTextField8" class="Polaris-Label__Text">Shipping address</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue Polaris-TextField--multiline"><textarea id="PolarisTextField8" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField8Label" aria-invalid="false" aria-multiline="true" style="height: 106px;">1776 Barnes Street
Orlando, FL 32801</textarea>
          <div class="Polaris-TextField__Backdrop"></div>
          <div aria-hidden="true" class="Polaris-TextField__Resizer">
            <div class="Polaris-TextField__DummyInput">1776 Barnes Street<br>Orlandoundefined FL 32801<br></div>
            <div class="Polaris-TextField__DummyInput"><br><br><br><br></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with hidden label

テキストフィールドの目的が文脈から明らかな場合に、ラベルを視覚的に隠すために使用します。ラベルはスクリーンリーダーでも利用可能です。このオプションの使用には注意が必要です。ほとんどの場合、ラベルを表示してください。

React

function HiddenLabelExample() {
  const [value, setValue] = useState('12');
  const [selected, setSelected] = useState('yes');

  const handleTextChange = useCallback((newValue) => setValue(newValue), []);

  const handleChoiceChange = useCallback(
    (selections) => setSelected(selections[0]),
    [],
  );

  return (
    <FormLayout>
      <ChoiceList
        title="Gift card auto-expiration"
        choices={[
          {label: 'Gift cards never expire', value: 'no'},
          {label: 'Gift cards expire', value: 'yes'},
        ]}
        selected={[selected]}
        onChange={handleChoiceChange}
      />
      <TextField
        label="Gift cards expire after"
        type="number"
        labelHidden
        value={value}
        disabled={selected === 'no'}
        onChange={handleTextChange}
        autoComplete="off"
        connectedRight={
          <Select
            label="Unit of time"
            labelHidden
            options={['months after purchase']}
          />
        }
      />
    </FormLayout>
  );
}

HTML

<div>
  <div class="Polaris-FormLayout">
    <div class="Polaris-FormLayout__Item">
      <fieldset class="Polaris-ChoiceList" id="PolarisChoiceList2" aria-invalid="false">
        <legend class="Polaris-ChoiceList__Title">Gift card auto-expiration</legend>
        <ul class="Polaris-ChoiceList__Choices">
          <li><label class="Polaris-Choice" for="PolarisRadioButton3"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton3" name="PolarisChoiceList2" type="radio" class="Polaris-RadioButton__Input" value="no"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Gift cards never expire</span></label></li>
          <li><label class="Polaris-Choice" for="PolarisRadioButton4"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton4" name="PolarisChoiceList2" type="radio" class="Polaris-RadioButton__Input" value="yes" checked=""><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Gift cards expire</span></label></li>
        </ul>
      </fieldset>
    </div>
    <div class="Polaris-FormLayout__Item">
      <div class="Polaris-Labelled--hidden">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisTextField10Label" for="PolarisTextField10" class="Polaris-Label__Text">Gift cards expire after</label></div>
        </div>
        <div class="Polaris-Connected">
          <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
            <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField10" autocomplete="off" class="Polaris-TextField__Input" type="number" aria-labelledby="PolarisTextField10Label" aria-invalid="false" value="12">
              <div class="Polaris-TextField__Spinner" aria-hidden="true">
                <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                  <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m15 12-5-5-5 5h10z"></path>
                      </svg></span></div>
                </div>
                <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                  <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m5 8 5 5 5-5H5z"></path>
                      </svg></span></div>
                </div>
              </div>
              <div class="Polaris-TextField__Backdrop"></div>
            </div>
          </div>
          <div class="Polaris-Connected__Item">
            <div class="Polaris-Labelled--hidden">
              <div class="Polaris-Labelled__LabelWrapper">
                <div class="Polaris-Label"><label id="PolarisSelect2Label" for="PolarisSelect2" class="Polaris-Label__Text">Unit of time</label></div>
              </div>
              <div class="Polaris-Select"><select id="PolarisSelect2" class="Polaris-Select__Input" aria-invalid="false">
                  <option value="months after purchase">months after purchase</option>
                </select>
                <div class="Polaris-Select__Content" aria-hidden="true"><span class="Polaris-Select__SelectedOption">months after purchase</span><span class="Polaris-Select__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path>
                      </svg></span></span></div>
                <div class="Polaris-Select__Backdrop"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with label action

オプションの副次的なアクションがテキストフィールドと密接に関連している場合に使用します。例えば、関税コードを入力するフィールドでは、ラベルアクションとして、テーブルから適切なコードを検索することができます。

React

function LabelActionExample() {
  const [textFieldValue, setTextFieldValue] = useState('6201.11.0000');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Tariff code"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      labelAction={{content: 'Look up codes'}}
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField12Label" for="PolarisTextField12" class="Polaris-Label__Text">Tariff code</label></div>
      <div class="Polaris-Labelled__Action"><button class="Polaris-Button Polaris-Button--plain" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Look up codes</span></span></button></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField12" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField12Label" aria-invalid="false" value="6201.11.0000">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

TextField with right aligned text

入力されたテキストを右寄せにしたい場合に使用します。

React

function RightAlignExample() {
  const [textFieldValue, setTextFieldValue] = useState('1');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <Stack>
      <Stack.Item fill>Price</Stack.Item>
      <TextField
        label="Price"
        labelHidden
        value={textFieldValue}
        onChange={handleTextFieldChange}
        autoComplete="off"
        align="right"
      />
    </Stack>
  );
}

HTML

<div>
  <div class="Polaris-Stack">
    <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">Price</div>
    <div class="Polaris-Stack__Item">
      <div class="Polaris-Labelled--hidden">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisTextField14Label" for="PolarisTextField14" class="Polaris-Label__Text">Price</label></div>
        </div>
        <div class="Polaris-Connected">
          <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
            <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField14" autocomplete="off" class="Polaris-TextField__Input Polaris-TextField__Input--alignRight" aria-labelledby="PolarisTextField14Label" aria-invalid="false" value="1">
              <div class="Polaris-TextField__Backdrop"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with placeholder text

想定される入力について、短くて必要のないヒントを提供するために使用します。プレースホルダのテキストはコントラストが低いので、重要な情報はこれに頼らないようにしてください。

React

function PlaceholderExample() {
  const [textFieldValue, setTextFieldValue] = useState('');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Shipping zone name"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      placeholder="Example: North America, Europe"
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField16Label" for="PolarisTextField16" class="Polaris-Label__Text">Shipping zone name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField"><input id="PolarisTextField16" placeholder="Example: North America, Europe" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField16Label" aria-invalid="false" value="">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with help text

テキストフィールドの下に短い説明コンテンツを表示する場合に使用します。ヘルプテキストは、不適切なフォーマット（日付や特定の文字要件を持つパスワードなど）に起因するエラーを修正する方法をマーチャントが理解するために機能します。さらに説明が必要な場合は、Shopify ヘルプセンターにリンクしてください。

React

function HelpTextExample() {
  const [textFieldValue, setTextFieldValue] = useState(
    'bernadette.lapresse@jadedpixel.com',
  );

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Account email"
      type="email"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      helpText="We’ll use this address if we need to contact you about your account."
      autoComplete="email"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField18Label" for="PolarisTextField18" class="Polaris-Label__Text">Account email</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField18" autocomplete="email" class="Polaris-TextField__Input" type="email" aria-describedby="PolarisTextField18HelpText" aria-labelledby="PolarisTextField18Label" aria-invalid="false" value="bernadette.lapresse@jadedpixel.com">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
    <div class="Polaris-Labelled__HelpText" id="PolarisTextField18HelpText">We’ll use this address if we need to contact you about your account.</div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with prefix or suffix

インラインでの使用に適した特殊な形式のヘルプテキストとして使用します。

通貨記号（$、¥、£）などには接頭語を使用します。
測定単位（in、cm）などには接尾語を使用します。

React

function PrefixExample() {
  const [textFieldValue, setTextFieldValue] = useState('2.00');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Price"
      type="number"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      prefix="$"
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField20Label" for="PolarisTextField20" class="Polaris-Label__Text">Price</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue">
          <div class="Polaris-TextField__Prefix" id="PolarisTextField20Prefix">$</div><input id="PolarisTextField20" autocomplete="off" class="Polaris-TextField__Input" type="number" aria-labelledby="PolarisTextField20Label PolarisTextField20Prefix" aria-invalid="false" value="2.00">
          <div class="Polaris-TextField__Spinner" aria-hidden="true">
            <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
              <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m15 12-5-5-5 5h10z"></path>
                  </svg></span></div>
            </div>
            <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
              <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m5 8 5 5 5-5H5z"></path>
                  </svg></span></div>
            </div>
          </div>
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with connected fields

テキストフィールドと複数の関連フィールドで論理的な単位を構成する場合に使用します。

重量を数値として入力し、別の測定単位を設定する場合は、ドロップダウンメニューを選択できるテキストフィールド（例：kg、lb）を関連フィールドとして使用します。

React

function ConnectedFieldsExample() {
  const [textFieldValue, setTextFieldValue] = useState('10.6');
  const [selectValue, setSelectValue] = useState('kg');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  const handleSelectChange = useCallback((value) => setSelectValue(value), []);

  return (
    <TextField
      label="Weight"
      type="number"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      autoComplete="off"
      connectedLeft={
        <Select
          value={selectValue}
          label="Weight unit"
          onChange={handleSelectChange}
          labelHidden
          options={['kg', 'lb']}
        />
      }
      connectedRight={<Button>Submit</Button>}
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField22Label" for="PolarisTextField22" class="Polaris-Label__Text">Weight</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item">
        <div class="Polaris-Labelled--hidden">
          <div class="Polaris-Labelled__LabelWrapper">
            <div class="Polaris-Label"><label id="PolarisSelect4Label" for="PolarisSelect4" class="Polaris-Label__Text">Weight unit</label></div>
          </div>
          <div class="Polaris-Select"><select id="PolarisSelect4" class="Polaris-Select__Input" aria-invalid="false">
              <option value="kg">kg</option>
              <option value="lb">lb</option>
            </select>
            <div class="Polaris-Select__Content" aria-hidden="true"><span class="Polaris-Select__SelectedOption">kg</span><span class="Polaris-Select__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path>
                  </svg></span></span></div>
            <div class="Polaris-Select__Backdrop"></div>
          </div>
        </div>
      </div>
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField22" autocomplete="off" class="Polaris-TextField__Input" type="number" aria-labelledby="PolarisTextField22Label" aria-invalid="false" value="10.6">
          <div class="Polaris-TextField__Spinner" aria-hidden="true">
            <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
              <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m15 12-5-5-5 5h10z"></path>
                  </svg></span></div>
            </div>
            <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
              <div class="Polaris-TextField__SpinnerIcon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m5 8 5 5 5-5H5z"></path>
                  </svg></span></div>
            </div>
          </div>
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
      <div class="Polaris-Connected__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Submit</span></span></button></div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with validation error

入力が有効であるか、エラーがあるかをマーチャントに知らせるために使用します。可能な限り、マーチャントがフィールドでの操作を終えたらすぐに入力を検証してください（それ以前は不可）。フィールドにすでにエラーがある場合は、マーチャントが入力するときにエラーを検証して削除し、エラーが修正されたことをすぐに確認できるようにします。

React

function ValidationErrorExample() {
  const [textFieldValue, setTextFieldValue] = useState('');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Store name"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      error="Store name is required"
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField24Label" for="PolarisTextField24" class="Polaris-Label__Text">Store name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--error"><input id="PolarisTextField24" autocomplete="off" class="Polaris-TextField__Input" aria-describedby="PolarisTextField24Error" aria-labelledby="PolarisTextField24Label" aria-invalid="true" value="">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
    <div class="Polaris-Labelled__Error">
      <div id="PolarisTextField24Error" class="Polaris-InlineError">
        <div class="Polaris-InlineError__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
              <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM9 9a1 1 0 0 0 2 0V7a1 1 0 1 0-2 0v2zm0 4a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"></path>
            </svg></span></div>Store name is required
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with separate validation error

テキストフィールドが依存しているフォーム入力のグループのコンテキストで、テキストフィールドの入力が無効な場合にマーチャントに知らせるために使用します。

errorprop がtrueの boolean 値を持つ場合、テキストフィールドコンポーネントはマーチャントに入力が無効であることを示し、その下にエラーメッセージを直接表示しません。これは、フォーム内にインラインのエラーコンポーネントが別途存在することを想定しています。

無効なテキストフィールドとその検証エラーを別々に表示するには、以下のようにします。

テキストフィールドコンポーネントのidprop に一意の識別子を設定します。
テキストフィールドコンポーネントのerrorprop にブール値を設定する。
無効なテキストフィールドの入力を記述するためにインラインエラーコンポーネントを使用し、そのfieldIDprop にテキストフィールドコンポーネントのidと同じ一意のインデンティファイアを設定します。

React

function SeparateValidationErrorExample() {
  const [textFieldValue, setTextFieldValue] = useState('');
  const [selectTypeValue, setSelectTypeValue] = useState('Product type');
  const [selectConditionValue, setSelectConditionValue] =
    useState('is equal to');

  const handleTextFieldValueChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  const handleSelectTypeChange = useCallback(
    (value) => setSelectTypeValue(value),
    [],
  );

  const handleSelectConditionChange = useCallback(
    (value) => setSelectConditionValue(value),
    [],
  );

  const textFieldID = 'ruleContent';
  const isInvalid = isValueInvalid(textFieldValue);
  const errorMessage = isInvalid
    ? 'Enter 3 or more characters for product type is equal to'
    : '';

  const formGroupMarkup = (
    <Stack wrap={false} alignment="leading" spacing="loose">
      <Stack.Item fill>
        <FormLayout>
          <FormLayout.Group condensed>
            <Select
              labelHidden
              label="Collection rule type"
              options={['Product type']}
              value={selectTypeValue}
              onChange={handleSelectTypeChange}
            />
            <Select
              labelHidden
              label="Collection rule condition"
              options={['is equal to']}
              value={selectConditionValue}
              onChange={handleSelectConditionChange}
            />
            <TextField
              labelHidden
              label="Collection rule content"
              error={isInvalid}
              id={textFieldID}
              value={textFieldValue}
              onChange={handleTextFieldValueChange}
              autoComplete="off"
            />
          </FormLayout.Group>
        </FormLayout>
        <div style={{marginTop: '4px'}}>
          <InlineError message={errorMessage} fieldID={textFieldID} />
        </div>
      </Stack.Item>
      <Button icon={DeleteMinor} accessibilityLabel="Remove item" />
    </Stack>
  );

  return (
    <Card sectioned>
      <FormLayout>{formGroupMarkup}</FormLayout>
    </Card>
  );

  function isValueInvalid(content) {
    if (!content) {
      return true;
    }

    return content.length < 3;
  }
}

HTML

<div>
  <div class="Polaris-Card">
    <div class="Polaris-Card__Section">
      <div class="Polaris-FormLayout">
        <div class="Polaris-FormLayout__Item">
          <div class="Polaris-Stack Polaris-Stack--spacingLoose Polaris-Stack--alignmentLeading Polaris-Stack--noWrap">
            <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">
              <div class="Polaris-FormLayout">
                <div role="group" class="Polaris-FormLayout--condensed">
                  <div class="Polaris-FormLayout__Items">
                    <div class="Polaris-FormLayout__Item">
                      <div class="Polaris-Labelled--hidden">
                        <div class="Polaris-Labelled__LabelWrapper">
                          <div class="Polaris-Label"><label id="PolarisSelect7Label" for="PolarisSelect7" class="Polaris-Label__Text">Collection rule type</label></div>
                        </div>
                        <div class="Polaris-Select"><select id="PolarisSelect7" class="Polaris-Select__Input" aria-invalid="false">
                            <option value="Product type">Product type</option>
                          </select>
                          <div class="Polaris-Select__Content" aria-hidden="true"><span class="Polaris-Select__SelectedOption">Product type</span><span class="Polaris-Select__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                  <path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path>
                                </svg></span></span></div>
                          <div class="Polaris-Select__Backdrop"></div>
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-FormLayout__Item">
                      <div class="Polaris-Labelled--hidden">
                        <div class="Polaris-Labelled__LabelWrapper">
                          <div class="Polaris-Label"><label id="PolarisSelect8Label" for="PolarisSelect8" class="Polaris-Label__Text">Collection rule condition</label></div>
                        </div>
                        <div class="Polaris-Select"><select id="PolarisSelect8" class="Polaris-Select__Input" aria-invalid="false">
                            <option value="is equal to">is equal to</option>
                          </select>
                          <div class="Polaris-Select__Content" aria-hidden="true"><span class="Polaris-Select__SelectedOption">is equal to</span><span class="Polaris-Select__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                  <path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path>
                                </svg></span></span></div>
                          <div class="Polaris-Select__Backdrop"></div>
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-FormLayout__Item">
                      <div class="Polaris-Labelled--hidden">
                        <div class="Polaris-Labelled__LabelWrapper">
                          <div class="Polaris-Label"><label id="ruleContentLabel" for="ruleContent" class="Polaris-Label__Text">Collection rule content</label></div>
                        </div>
                        <div class="Polaris-Connected">
                          <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                            <div class="Polaris-TextField Polaris-TextField--error"><input id="ruleContent" autocomplete="off" class="Polaris-TextField__Input" aria-describedby="ruleContentError" aria-labelledby="ruleContentLabel" aria-invalid="true" value="">
                              <div class="Polaris-TextField__Backdrop"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-top: 4px;">
                <div id="ruleContentError" class="Polaris-InlineError">
                  <div class="Polaris-InlineError__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM9 9a1 1 0 0 0 2 0V7a1 1 0 1 0-2 0v2zm0 4a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"></path>
                      </svg></span></div>Enter 3 or more characters for product type is equal to
                </div>
              </div>
            </div>
            <div class="Polaris-Stack__Item"><button class="Polaris-Button Polaris-Button--iconOnly" aria-label="Remove item" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="M8 3.994C8 2.893 8.895 2 10 2s2 .893 2 1.994h4c.552 0 1 .446 1 .997a1 1 0 0 1-1 .997H4c-.552 0-1-.447-1-.997s.448-.997 1-.997h4zM5 14.508V8h2v6.508a.5.5 0 0 0 .5.498H9V8h2v7.006h1.5a.5.5 0 0 0 .5-.498V8h2v6.508A2.496 2.496 0 0 1 12.5 17h-5C6.12 17 5 15.884 5 14.508z"></path>
                      </svg></span></span></span></button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Disabled text field

テキストフィールドが対話に使用できないことを示すために使用します。特定の状態でのみ情報を必要とするフォームでよく使われます。例えば、選択リストでOtherが選択されていないときにOtherの隣にあるテキストフィールドを表示します。

React

<TextField label="Store name" disabled autoComplete="off" />

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField26Label" for="PolarisTextField26" class="Polaris-Label__Text">Store name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--disabled"><input id="PolarisTextField26" disabled="" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField26Label" aria-invalid="false" value="">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with character count

テキストフィールドの現在の文字数を表示します。max lengthと組み合わせて使用すると、テキストフィールドの現在の残り文字数が表示されます。

React

function TextFieldWithCharacterCountExample() {
  const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Store name"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      maxLength={20}
      autoComplete="off"
      showCharacterCount
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField28Label" for="PolarisTextField28" class="Polaris-Label__Text">Store name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField28" autocomplete="off" class="Polaris-TextField__Input" maxlength="20" aria-describedby="PolarisTextField28CharacterCounter" aria-labelledby="PolarisTextField28Label" aria-invalid="false" value="Jaded Pixel">
          <div id="PolarisTextField28CharacterCounter" class="Polaris-TextField__CharacterCount" aria-label="11 of 20 characters used" aria-live="off" aria-atomic="true">11/20</div>
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with clear button

マーチャントがテキストフィールドのコンテンツをクリアするために使用します。

React

function TextFieldWithClearButtonExample() {
  const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  const handleClearButtonClick = useCallback(() => setTextFieldValue(''), []);

  return (
    <TextField
      label="Store name"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      clearButton
      onClearButtonClick={handleClearButtonClick}
      autoComplete="off"
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField30Label" for="PolarisTextField30" class="Polaris-Label__Text">Store name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField30" autocomplete="off" class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton" aria-labelledby="PolarisTextField30Label" aria-invalid="false" value="Jaded Pixel"><button type="button" class="Polaris-TextField__ClearButton"><span class="Polaris-VisuallyHidden">Clear</span><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><span class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM7.707 6.293a1 1 0 0 0-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 1 0 1.414 1.414L10 11.414l2.293 2.293a1 1 0 1 0 1.414-1.414L11.414 10l2.293-2.293a1 1 0 0 0-1.414-1.414L10 8.586 7.707 6.293z"></path>
              </svg></span></button>
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Text field with monospaced font

テキストフィールドに等幅フォントを適用するために使用する

React

function TextFieldWithMonospacedFontExample() {
  const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');

  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [],
  );

  return (
    <TextField
      label="Store name"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      monospaced
    />
  );
}

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisTextField32Label" for="PolarisTextField32" class="Polaris-Label__Text">Store name</label></div>
    </div>
    <div class="Polaris-Connected">
      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
        <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField32" class="Polaris-TextField__Input Polaris-TextField--monospaced" aria-labelledby="PolarisTextField32Label" aria-invalid="false" value="Jaded Pixel">
          <div class="Polaris-TextField__Backdrop"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

align
"left" | "center" | "right"
入力されたテキストのアライメントを決定する

ariaActiveDescendant
string
入力に対して視覚的にフォーカスされている関連コンポーネントの要素の id を示す。

ariaAutocomplete
string
どのようなユーザー入力補完の提案を行うかを示す

ariaControls
string
入力で制御されるコンポーネントの ID を示す。

ariaExpanded
boolean
ポップオーバーが表示されているかどうかを示す

ariaOwns
string
入力で所有しているコンポーネントの ID を示す

autoComplete(Required)
string
ブラウザによる自動入力を有効にします。ブラウザに情報を入力させたくない場合はoffに設定してください。

autoFocus
boolean
入力を自動的にフォーカスする

clearButton
boolean
入力にクリアテキストボタンを表示する

connectedLeft
React.ReactNode
入力の左に接続されている要素

connectedRight
React.ReactNode
入力の右に接続されている要素

disabled
boolean
入力を無効にする

error
string | ReactElement | (string | ReactElement)[] | boolean
ラベルの下に表示されるエラー

focused
boolean
入力のフォーカス状態を強制的に変更する

helpText
React.ReactNode
追加で表示するヒントテキスト

id
string
入力の ID

label(Required)
React.ReactNode
入力のラベル

labelAction
Action
ラベルにアクションを追加する

labelHidden
boolean
ラベルを視覚的に隠す

max
number | string
ネイティブの HTML 属性の動作を模倣し、最大値を制限します。

maxHeight
number | string
入力要素の最大の高さです。multiline が true のときのみ適用されます。

maxLength
number
入力の最大文字数

min
number | string
ネイティブの HTML 属性の動作を模倣し、最小値を制限する。

minLength
number
入力の最小文字数

monospaced
boolean
等幅フォントを使用するかどうかを示す

multiline
boolean | number
複数行の入力を可能にする

name
string
インプットの名前

pattern
string
値を確認するための正規表現

placeholder
string
表示されるヒントテキスト

prefix
React.ReactNode
値の前に表示するテキスト

readOnly
boolean
入力の編集を無効にする

requiredIndicator
boolean
視覚的に必要なインジケータ、ラベルにアスタリスクを追加する

role
string
入力に対して特定のロール属性を定義する

showCharacterCount
boolean
文字数を表示するかどうかを示す

spellCheck
boolean
スペルチェックが必要な値かどうかを示す

step
number
数値入力、日付入力のリミット増分値

suffix
React.ReactNode
値の後に表示されるテキスト

value
string
インプットの初期値

onBlur
() => void
フォーカスが外された時のコールバック

onChange
(value: string, id: string) => void
値が変更された時のコールバック

onClearButtonClick
(id: string) => void
クリアボタンがクリックされた時のコールバック

onFocus
() => void
入力がフォーカスされた時のコールバック

アクセシビリティ

構造

スクリーン・リーダーは、テキスト・フィールドの情報をネイティブな HTML によって自動的に伝えます。

disabledprop を使って、HTML のdisabled属性をテキストフィールドに追加します。
readOnlyprop を使って、HTML のreadonly属性をテキストフィールドに追加します。
typeprop を使用すると、いくつかの支援技術がソフトウェアキーボードを現在のタスクに適応させます。これにより、移動性、視覚、および認知に問題のある商人が、より簡単に情報を入力できるようになります。

idprop を使用して、テキストフィールドに一意のid属性値を指定します。idを指定しない場合は、コンポーネントが自動的にidを生成します。すべてのテキストフィールドには、一意のid値が必要です。

ラベリング

labelprop は、すべてのマーチャントにチェックボックスの目的を伝えるために必要です。

目の見えるマーチャントにテキストフィールドの目的を伝える別の視覚的な手がかりがある場合は、labelHiddenプロップでラベルを視覚的に隠すことができます。

helpTextprop でヘルプテキストを提供したり、errorプロップでインラインエラーメッセージを提供した場合、ヘルプやエラーの内容はaria-describedby属性でスクリーンリーダーのユーザーに伝えられます。この属性を使うと、コンテンツがラベルと一緒に読み上げられ、すぐに、または少し遅れて読み上げられます。

placeholderprop を使用して、追加の説明を提供します。ただし、すべてのマーチャントに内容が伝わるとは限らないので、プレースホルダーだけに頼らないようにしてください。

キーボード対応

テキストフィールドは標準的なキーボード対応を備えています。

キーボードに依存しているマーチャントは、tabキーを使って各テキストフィールドにフォーカスを移すことを期待しています（逆方向にタブする場合はshift+tab）。
typeがnumberに設定されている場合、マーチャントは上下の矢印キーを使ってフィールドに入力された値を調整することができます。
disabledprop を使うと、テキストフィールドがキーボードフォーカスや入力を受け取れなくなります。
readOnlyprop を使うと、テキストフィールドにフォーカスが当たりますが、入力や編集はできません。
inputModeprop は、モバイルのマーチャント用に適切なキーボードを表示するために使用できます。

Automatically focusing

autoFocusprop を使って自動的にテキストフィールドにフォーカスを移動させることができますが、一般的にはフィールドに自動的にフォーカスすることは避けたほうがよいでしょう。autoFocusprop はデフォルトではfalseに設定されており、同等以上の重要性を持つ他のコントロールやコンテンツをスキップしてもフォーカスが強制されない場合にのみ使用してください。

Android

Default text field

想定される入力が短い場合に、マーチャントがテキスト入力を行えるようにするために使用します。長い入力の場合は、auto growまたはmultilineオプションを使用してください。

Number field

入力テキストが数字である場合に使用します。

これにより、モバイル端末では正しいキーボードが表示されます。

Email field

テキスト入力がメールアドレスの場合に使用します。

これにより、モバイル端末では正しいキーボードが表示されます。

Multiline text field

想定される入力が 1 行以上になる場合に使用します。フィールドは、追加のテキストに合わせて自動的に大きくなります。

Text field with placeholder text

想定される入力について、短くて必要のないヒントを提供するために使用します。プレースホルダのテキストはコントラストが低いので、重要な情報はこのテキストに頼らないようにしてください。

Text field with help text

Text field with prefix or suffix

インラインでの使用に適した特殊な形式のヘルプテキストとして使用します。

通貨記号（$、¥、£）などには接頭語を使用します。
測定単位（in、cm）などには接尾語を使用します。

Text field with connected fields

テキストフィールドと複数の関連フィールドで論理的な単位を構成する場合に使用します。

重量を数値として入力し、別の単位を使用する場合は、セレクタ（kgやlbなど）を持つテキストフィールドを関連フィールドとして使用します。

Text field with icon action

マーチャントがテキストフィールド内でアクションを起こすために使用します。

例えば、バーコードのアイコンをタップすると、カメラが起動し、バーコードフィールドでバーコードをスキャンすることができます。これにより、マーチャントは入力を簡略化することができます。

Text field with validation error

アクセシビリティ

Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。

iOS

Default text field

想定される入力が短い場合に、マーチャントがテキスト入力を行えるようにするために使用します。長い入力の場合は、auto growまたはmultilineオプションを使用してください。

Number field

入力テキストが数字である場合に使用します。

これにより、モバイル端末では正しいキーボードが表示されます。

Email field

テキスト入力がメールアドレスの場合に使用します。

これにより、モバイル端末では正しいキーボードが表示されます。

Multiline text field

想定される入力が 1 行以上になる場合に使用します。フィールドは、追加のテキストに合わせて自動的に大きくなります。

Text field with placeholder text

Text field with help text

Text field with prefix or suffix

インラインでの使用に適した特殊な形式のヘルプテキストとして使用します。

通貨記号（$、¥、£）などには接頭語を使用します。
測定単位（in、cm）などには接尾語を使用します。

Text field with connected fields

テキストフィールドと複数の関連フィールドで論理的な単位を構成する場合に使用します。

重量を数値として入力し、別の単位を使用する場合は、セレクタ（kgやlbなど）を持つテキストフィールドを関連フィールドとして使用します。

Text field with icon action

マーチャントがテキストフィールド内でアクションを起こすために使用します。

Text field with validation error

アクセシビリティ

iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントをご覧ください。

ベストプラクティス

テキストフィールドは以下のことに注意してください。

マーチャントが何を入力すべきかがわかるように、明確なラベルを付ける。
必須ではない入力を求める場合は、オプションと表示する。
本当に必要な情報のみを入力してもらう。
マーチャントがフィールドでの操作を終えるとすぐに入力を検証する（それ以前は検証しない）。

オートコンプリート

inputフィールドのオートコンプリート属性は、2 種類のブラウザの動作を制御します。

ブラウザのオートフィル：パスワード、住所、クレジットカードのデータなど、以前に保存した情報をフォームフィールドに自動的に入力する機能。

オートフィル機能は、ユーザーにとって重要な機能です。Google は、オートフィルを使用した場合、「ユーザーがフォームを完了するまでの時間が最大 30%短縮される」ことを発見しました。
WHATWG には、autocomplete属性でサポートされているオートフィルの値の一覧があります。すべての入力タイプとそれに対応するオートコンプリート属性の値については、「4.10.18.7 Autofill」を参照してください。

ブラウザのオートコンプリート - そのフィールドに対して以前に送信された値を表示する機能です。

フィールドのオートコンプリートがオンになっている場合、ユーザーには、その入力に対して過去に送信された値のリストが表示されます。

推奨

オートフィル/オートコンプリートをオフにする

ブラウザにユーザーの情報を自動入力させたくない場合でも、オートコンプリート属性の値をoffまたはnopeにすることをお勧めします。

残念ながら、すべてのブラウザがautocomplete="off"をサポートまたは尊重しているわけではありません。これが問題となります。たとえば、Chrome には長い間未解決のバグがあり、今のところ off のサポートは追加されません。

ブラウザー	`autocomplete="off"`の対応	詳細
Chrome	部分的に対応	ユーザーがブラウザの自動入力機能を使用しているときに、`off`の値を意図的に無視することがありました。バグを参照してください。
Safari	部分的に対応	`username`、`email`、`password`フィールドの`off`値を無視します。
Firefox	部分的に対応	ログインフォームの`off`値を無視するようになりました。バグを参照してください。
Edge	部分的に対応	ユーザーがブラウザのオートフィル機能を使用している場合、意図的に`off`の値を無視する。

Chrome では、nopeという値（または有効でない文字列）を使用すると、オートコンプリートがオフになるようです。しかし、このサポートでもいくつかの不整合が見られます。

推奨（Chrome のみ）

Chrome でオートフィルとブラウザのオートコンプリート（以前に送信した値）の両方をオフにする
- autocomplete=nopeを使用し、name属性を持つ必要があります。
Chrome でブラウザのオートコンプリート（送信済みの値）をオフにする
- name属性がなく、フィールドが典型的なオートフィル入力ではない場合（アドレス、メールなど）、autocomplete=offを使用します。

コンテンツガイドライン

テキストフィールドのコンテンツのガイドラインについては、テキストフィールド体験ページを参照してください。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます