⭐️

【Polaris和訳】Components/Forms⑤

2021/11/06に公開約78,900字

この記事について

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

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

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Forms⑤

Date picker

日付ピッカーは、Shopify で日付を選択する必要がある場合にサイト内で一貫して適用されるビジュアルカレンダーから日付を選択することができます。

Web

Default date picker

今日に近い日を選択する必要がある場合に使用します(今日は日付ピッカーのデフォルトの開始位置です)。

React
React
function DatePickerExample() {
  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      onMonthChange={handleMonthChange}
      selected={selectedDates}
    />
  );
}
HTML
HTML
<div>
  <div class="Polaris-DatePicker">
    <div class="Polaris-DatePicker__Header"><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show previous month, January 2018" 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="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path>
              </svg></span></span></span></button><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show next month, March 2018" 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="m17.707 9.293-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414z"></path>
              </svg></span></span></span></button></div>
    <div class="Polaris-DatePicker__MonthLayout">
      <div class="Polaris-DatePicker__MonthContainer">
        <table role="grid" class="Polaris-DatePicker__Month">
          <caption class="Polaris-DatePicker__Title">February 2018</caption>
          <thead>
            <tr>
              <th aria-label="Sunday" scope="col" class="Polaris-DatePicker__Weekday">Su</th>
              <th aria-label="Monday" scope="col" class="Polaris-DatePicker__Weekday">Mo</th>
              <th aria-label="Tuesday" scope="col" class="Polaris-DatePicker__Weekday">Tu</th>
              <th aria-label="Wednesday" scope="col" class="Polaris-DatePicker__Weekday">We</th>
              <th aria-label="Thursday" scope="col" class="Polaris-DatePicker__Weekday">Th</th>
              <th aria-label="Friday" scope="col" class="Polaris-DatePicker__Weekday">Fr</th>
              <th aria-label="Saturday" scope="col" class="Polaris-DatePicker__Weekday">Sa</th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Thursday February 1 2018" aria-pressed="false">1</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Friday February 2 2018" aria-pressed="false">2</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Saturday February 3 2018" aria-pressed="false">3</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Sunday February 4 2018" aria-pressed="false">4</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Monday February 5 2018" aria-pressed="false">5</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Tuesday February 6 2018" aria-pressed="false">6</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--hoverRight" aria-label="Wednesday February 7 2018" aria-pressed="true">7</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Thursday February 8 2018" aria-pressed="false">8</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Friday February 9 2018" aria-pressed="false">9</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Saturday February 10 2018" aria-pressed="false">10</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Sunday February 11 2018" aria-pressed="false">11</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Monday February 12 2018" aria-pressed="false">12</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Tuesday February 13 2018" aria-pressed="false">13</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Wednesday February 14 2018" aria-pressed="false">14</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Thursday February 15 2018" aria-pressed="false">15</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Friday February 16 2018" aria-pressed="false">16</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Saturday February 17 2018" aria-pressed="false">17</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Sunday February 18 2018" aria-pressed="false">18</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Monday February 19 2018" aria-pressed="false">19</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Tuesday February 20 2018" aria-pressed="false">20</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Wednesday February 21 2018" aria-pressed="false">21</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Thursday February 22 2018" aria-pressed="false">22</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hoverRight" aria-label="Friday February 23 2018" aria-pressed="false">23</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day" aria-label="Saturday February 24 2018" aria-pressed="false">24</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day" aria-label="Sunday February 25 2018" aria-pressed="false">25</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day" aria-label="Monday February 26 2018" aria-pressed="false">26</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day" aria-label="Tuesday February 27 2018" aria-pressed="false">27</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day" aria-label="Wednesday February 28 2018" aria-pressed="false">28</button></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Ranged date picker

マーチャントが今日に近い日の範囲を選択する必要がある場合に使用します(今日は日付ピッカーのデフォルトの開始位置です)。

React
React
function DatePickerExample() {
  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Sat Feb 10 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      onMonthChange={handleMonthChange}
      selected={selectedDates}
      allowRange
    />
  );
}
HTML
HTML
<div>
  <div class="Polaris-DatePicker">
    <div class="Polaris-DatePicker__Header"><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show previous month, January 2018" 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="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path>
              </svg></span></span></span></button><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show next month, March 2018" 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="m17.707 9.293-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414z"></path>
              </svg></span></span></span></button></div>
    <div class="Polaris-DatePicker__MonthLayout">
      <div class="Polaris-DatePicker__MonthContainer">
        <table role="grid" class="Polaris-DatePicker__Month">
          <caption class="Polaris-DatePicker__Title">February 2018</caption>
          <thead>
            <tr>
              <th aria-label="Sunday" scope="col" class="Polaris-DatePicker__Weekday">Su</th>
              <th aria-label="Monday" scope="col" class="Polaris-DatePicker__Weekday">Mo</th>
              <th aria-label="Tuesday" scope="col" class="Polaris-DatePicker__Weekday">Tu</th>
              <th aria-label="Wednesday" scope="col" class="Polaris-DatePicker__Weekday">We</th>
              <th aria-label="Thursday" scope="col" class="Polaris-DatePicker__Weekday">Th</th>
              <th aria-label="Friday" scope="col" class="Polaris-DatePicker__Weekday">Fr</th>
              <th aria-label="Saturday" scope="col" class="Polaris-DatePicker__Weekday">Sa</th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 1 2018" aria-pressed="false">1</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday February 2 2018" aria-pressed="false">2</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 3 2018" aria-pressed="false">3</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 4 2018" aria-pressed="false">4</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 5 2018" aria-pressed="false">5</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 6 2018" aria-pressed="false">6</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--firstInRange Polaris-DatePicker__Day--hasRange" aria-label="Start of range Wednesday February 7 2018" aria-pressed="true">7</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 8 2018" aria-pressed="false">8</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday February 9 2018" aria-pressed="false">9</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--lastInRange Polaris-DatePicker__Day--hasRange" aria-label="End of range Saturday February 10 2018" aria-pressed="true">10</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 11 2018" aria-pressed="false">11</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 12 2018" aria-pressed="false">12</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 13 2018" aria-pressed="false">13</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 14 2018" aria-pressed="false">14</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 15 2018" aria-pressed="false">15</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday February 16 2018" aria-pressed="false">16</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 17 2018" aria-pressed="false">17</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 18 2018" aria-pressed="false">18</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 19 2018" aria-pressed="false">19</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 20 2018" aria-pressed="false">20</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 21 2018" aria-pressed="false">21</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 22 2018" aria-pressed="false">22</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday February 23 2018" aria-pressed="false">23</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 24 2018" aria-pressed="false">24</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 25 2018" aria-pressed="false">25</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 26 2018" aria-pressed="false">26</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 27 2018" aria-pressed="false">27</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 28 2018" aria-pressed="false">28</button></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Multi-month ranged date picker

2 つの月を同時に表示するには、マルチマンスモードを使用します。

React
React
function DatePickerExample() {
  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Mon Mar 12 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      onMonthChange={handleMonthChange}
      selected={selectedDates}
      multiMonth
      allowRange
    />
  );
}
HTML
HTML
<div>
  <div class="Polaris-DatePicker">
    <div class="Polaris-DatePicker__Header"><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show previous month, January 2018" 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="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path>
              </svg></span></span></span></button><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show next month, April 2018" 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="m17.707 9.293-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414z"></path>
              </svg></span></span></span></button></div>
    <div class="Polaris-DatePicker__MonthLayout">
      <div class="Polaris-DatePicker__MonthContainer">
        <table role="grid" class="Polaris-DatePicker__Month">
          <caption class="Polaris-DatePicker__Title">February 2018</caption>
          <thead>
            <tr>
              <th aria-label="Sunday" scope="col" class="Polaris-DatePicker__Weekday">Su</th>
              <th aria-label="Monday" scope="col" class="Polaris-DatePicker__Weekday">Mo</th>
              <th aria-label="Tuesday" scope="col" class="Polaris-DatePicker__Weekday">Tu</th>
              <th aria-label="Wednesday" scope="col" class="Polaris-DatePicker__Weekday">We</th>
              <th aria-label="Thursday" scope="col" class="Polaris-DatePicker__Weekday">Th</th>
              <th aria-label="Friday" scope="col" class="Polaris-DatePicker__Weekday">Fr</th>
              <th aria-label="Saturday" scope="col" class="Polaris-DatePicker__Weekday">Sa</th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 1 2018" aria-pressed="false">1</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday February 2 2018" aria-pressed="false">2</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 3 2018" aria-pressed="false">3</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 4 2018" aria-pressed="false">4</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 5 2018" aria-pressed="false">5</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 6 2018" aria-pressed="false">6</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--firstInRange Polaris-DatePicker__Day--hasRange" aria-label="Start of range Wednesday February 7 2018" aria-pressed="true">7</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 8 2018" aria-pressed="false">8</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday February 9 2018" aria-pressed="false">9</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 10 2018" aria-pressed="false">10</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 11 2018" aria-pressed="false">11</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Monday February 12 2018" aria-pressed="false">12</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 13 2018" aria-pressed="false">13</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 14 2018" aria-pressed="false">14</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 15 2018" aria-pressed="false">15</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday February 16 2018" aria-pressed="false">16</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 17 2018" aria-pressed="false">17</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 18 2018" aria-pressed="false">18</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Monday February 19 2018" aria-pressed="false">19</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 20 2018" aria-pressed="false">20</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 21 2018" aria-pressed="false">21</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 22 2018" aria-pressed="false">22</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday February 23 2018" aria-pressed="false">23</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 24 2018" aria-pressed="false">24</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 25 2018" aria-pressed="false">25</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Monday February 26 2018" aria-pressed="false">26</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 27 2018" aria-pressed="false">27</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 28 2018" aria-pressed="false">28</button></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="Polaris-DatePicker__MonthContainer">
        <table role="grid" class="Polaris-DatePicker__Month">
          <caption class="Polaris-DatePicker__Title">March 2018</caption>
          <thead>
            <tr>
              <th aria-label="Sunday" scope="col" class="Polaris-DatePicker__Weekday">Su</th>
              <th aria-label="Monday" scope="col" class="Polaris-DatePicker__Weekday">Mo</th>
              <th aria-label="Tuesday" scope="col" class="Polaris-DatePicker__Weekday">Tu</th>
              <th aria-label="Wednesday" scope="col" class="Polaris-DatePicker__Weekday">We</th>
              <th aria-label="Thursday" scope="col" class="Polaris-DatePicker__Weekday">Th</th>
              <th aria-label="Friday" scope="col" class="Polaris-DatePicker__Weekday">Fr</th>
              <th aria-label="Saturday" scope="col" class="Polaris-DatePicker__Weekday">Sa</th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday March 1 2018" aria-pressed="false">1</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday March 2 2018" aria-pressed="false">2</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Saturday March 3 2018" aria-pressed="false">3</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Sunday March 4 2018" aria-pressed="false">4</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Monday March 5 2018" aria-pressed="false">5</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Tuesday March 6 2018" aria-pressed="false">6</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Wednesday March 7 2018" aria-pressed="false">7</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday March 8 2018" aria-pressed="false">8</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday March 9 2018" aria-pressed="false">9</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Saturday March 10 2018" aria-pressed="false">10</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Sunday March 11 2018" aria-pressed="false">11</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--lastInRange Polaris-DatePicker__Day--hasRange" aria-label="End of range Monday March 12 2018" aria-pressed="true">12</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday March 13 2018" aria-pressed="false">13</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday March 14 2018" aria-pressed="false">14</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday March 15 2018" aria-pressed="false">15</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday March 16 2018" aria-pressed="false">16</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday March 17 2018" aria-pressed="false">17</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday March 18 2018" aria-pressed="false">18</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday March 19 2018" aria-pressed="false">19</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday March 20 2018" aria-pressed="false">20</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday March 21 2018" aria-pressed="false">21</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday March 22 2018" aria-pressed="false">22</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday March 23 2018" aria-pressed="false">23</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday March 24 2018" aria-pressed="false">24</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday March 25 2018" aria-pressed="false">25</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday March 26 2018" aria-pressed="false">26</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday March 27 2018" aria-pressed="false">27</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday March 28 2018" aria-pressed="false">28</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday March 29 2018" aria-pressed="false">29</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday March 30 2018" aria-pressed="false">30</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday March 31 2018" aria-pressed="false">31</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Date picker with disabled dates

日付の範囲を選択できないようにしたい場合は、無効にすることができます。

React
React
function DatePickerExample() {
  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Sat Feb 10 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      onMonthChange={handleMonthChange}
      selected={selectedDates}
      disableDatesBefore={new Date('Sat Feb 03 2018 00:00:00 GMT-0500 (EST)')}
      disableDatesAfter={new Date('Sun Feb 18 2018 00:00:00 GMT-0500 (EST)')}
      allowRange
    />
  );
}
HTML
HTML
<div>
  <div class="Polaris-DatePicker">
    <div class="Polaris-DatePicker__Header"><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show previous month, January 2018" 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="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path>
              </svg></span></span></span></button><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Show next month, March 2018" 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="m17.707 9.293-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414z"></path>
              </svg></span></span></span></button></div>
    <div class="Polaris-DatePicker__MonthLayout">
      <div class="Polaris-DatePicker__MonthContainer">
        <table role="grid" class="Polaris-DatePicker__Month">
          <caption class="Polaris-DatePicker__Title">February 2018</caption>
          <thead>
            <tr>
              <th aria-label="Sunday" scope="col" class="Polaris-DatePicker__Weekday">Su</th>
              <th aria-label="Monday" scope="col" class="Polaris-DatePicker__Weekday">Mo</th>
              <th aria-label="Tuesday" scope="col" class="Polaris-DatePicker__Weekday">Tu</th>
              <th aria-label="Wednesday" scope="col" class="Polaris-DatePicker__Weekday">We</th>
              <th aria-label="Thursday" scope="col" class="Polaris-DatePicker__Weekday">Th</th>
              <th aria-label="Friday" scope="col" class="Polaris-DatePicker__Weekday">Fr</th>
              <th aria-label="Saturday" scope="col" class="Polaris-DatePicker__Weekday">Sa</th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hoverRight Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 1 2018" aria-disabled="true" aria-pressed="false">1</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hoverRight Polaris-DatePicker__Day--hasRange" aria-label="Friday February 2 2018" aria-disabled="true" aria-pressed="false">2</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 3 2018" aria-disabled="true" aria-pressed="false">3</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 4 2018" aria-disabled="false" aria-pressed="false">4</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 5 2018" aria-disabled="false" aria-pressed="false">5</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 6 2018" aria-disabled="false" aria-pressed="false">6</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--firstInRange Polaris-DatePicker__Day--hasRange" aria-label="Start of range Wednesday February 7 2018" aria-disabled="false" aria-pressed="true">7</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 8 2018" aria-disabled="false" aria-pressed="false">8</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--hasRange" aria-label="Friday February 9 2018" aria-disabled="false" aria-pressed="false">9</button></td>
              <td class="Polaris-DatePicker__DayCell Polaris-DatePicker__DayCell--inRange"><button type="button" tabindex="0" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--selected Polaris-DatePicker__Day--inRange Polaris-DatePicker__Day--lastInRange Polaris-DatePicker__Day--hasRange" aria-label="End of range Saturday February 10 2018" aria-disabled="false" aria-pressed="true">10</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 11 2018" aria-disabled="false" aria-pressed="false">11</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Monday February 12 2018" aria-disabled="false" aria-pressed="false">12</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 13 2018" aria-disabled="false" aria-pressed="false">13</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 14 2018" aria-disabled="false" aria-pressed="false">14</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 15 2018" aria-disabled="false" aria-pressed="false">15</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Friday February 16 2018" aria-disabled="false" aria-pressed="false">16</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 17 2018" aria-disabled="false" aria-pressed="false">17</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 18 2018" aria-disabled="false" aria-pressed="false">18</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Monday February 19 2018" aria-disabled="true" aria-pressed="false">19</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 20 2018" aria-disabled="true" aria-pressed="false">20</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 21 2018" aria-disabled="true" aria-pressed="false">21</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Thursday February 22 2018" aria-disabled="true" aria-pressed="false">22</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Friday February 23 2018" aria-disabled="true" aria-pressed="false">23</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Saturday February 24 2018" aria-disabled="true" aria-pressed="false">24</button></td>
            </tr>
            <tr class="Polaris-DatePicker__Week">
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Sunday February 25 2018" aria-disabled="true" aria-pressed="false">25</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Monday February 26 2018" aria-disabled="true" aria-pressed="false">26</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Tuesday February 27 2018" aria-disabled="true" aria-pressed="false">27</button></td>
              <td class="Polaris-DatePicker__DayCell"><button type="button" tabindex="-1" class="Polaris-DatePicker__Day Polaris-DatePicker__Day--disabled Polaris-DatePicker__Day--hasRange" aria-label="Wednesday February 28 2018" aria-disabled="true" aria-pressed="false">28</button></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
              <td class="Polaris-DatePicker__EmptyDayCell"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

allowRange
boolean
日付の範囲を選択できるようにする

dayAccessibilityLabelPrefix
string
単一選択の日付ピッカーで、選択された日のプレフィックステキストを視覚的に隠す。

disableDatesAfter
Date
これ以降の日付を選択できないようにする。

disableDatesBefore
Date
これより前の日付を選択できないようにする。

id
string
要素の ID

month(Required)
number
表示する月を 0 ~ 11 で指定します。0 は 1 月、1 は 2 月...11 は 12 月

multiMonth
boolean
セレクションは複数の月にまたがることができるようにする。

selected

Range

end(Required)
type: Date

start(Required)
type: Date

Date | Range
選択された日付または日付の範囲

weekStartsOn
number
0 から 6 までの週の最初の日。0 は日曜日、1 は月曜日...6 は土曜日です。

year(Required)
number
見せる年

onChange
(date: Range) => void
日付が選択された時のコールバック

onMonthChange
(month: number, year: number) => void
月が変更された時のコールバック

アクセシビリティ

ユーザーによっては、日付ピッカーの操作が難しいと感じるかもしれません。日付ピッカーコンポーネントを使用する場合は、テキストフィールドコンポーネントを使用して日付を入力するオプションを常に提供してください。

ポップオーバーコンポーネント内で日付ピッカーを使用する場合は、テキスト入力にフォーカスが当たったときにポップオーバーを表示するのではなく、ボタンを使用してポップオーバーを起動します。これにより、ユーザーの操作性が向上します。

キーボードサポート

  • tabキーを押すと前に、shift+tabキーを押すと後ろに移動し、前のボタン、次のボタン、カレンダーが表示されます。
  • カレンダーにフォーカスがあるときは、矢印キーで日付の間にキーボードフォーカスを移動できます。
  • フォーカスがある日付を選択するには、enterまたはreturnキーを押します。
Android

Default date picker

今日に近い日を選択する必要がある場合に使用します(今日は日付ピッカーのデフォルトの開始位置です)。

Ranged date picker

マーチャントが今日に近い日の範囲を選択する必要がある場合に使用します(今日は日付ピッカーのデフォルトの開始位置です)。

Multi-month ranged date picker

一度に 2 つの月を表示するには、multi-month モードを使用します。

Date picker with disabled dates

日付範囲を選択できないようにするには、日付範囲を無効にします。

アクセシビリティ

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

iOS

Default date picker

マーチャントが今日に近い日を選択する必要がある場合に使用します(今日は日付ピッカーのデフォルトの開始位置です)。

Ranged date picker

マーチャントが今日に近い日の範囲を選択する必要がある場合に使用します(今日は日付ピッカーのデフォルトの開始位置です)。

Multi-month ranged date picker

一度に 2 つの月を表示するには、multi-month モードを使用します。

Date picker with disabled dates

日付範囲を選択できないようにするには、日付範囲を無効にします。

アクセシビリティ

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

ベストプラクティス

日付ピッカーは以下のことに注意してください

  • スマートなデフォルトを使用し、一般的な選択項目を強調する。
  • 開始日と終了日を含む範囲が必要な場合を除き、単一の日付が選択されると閉じる
  • 範囲指定が必要な場合は、最初のクリックまたはタップで開始日を設定し、2 回目のクリックまたはタップで終了日を設定する。
  • 何年も先や過去の日付の入力には使用できません。
  • date format ガイドラインに従う

Form

フォームの送信を処理するラッパーコンポーネントです。

Custom onSubmit

フォームが送信されたときのコールバックとしてonSubmitを使用します。

React
React
function FormOnSubmitExample() {
  const [newsletter, setNewsletter] = useState(false);
  const [email, setEmail] = useState('');

  const handleSubmit = useCallback((_event) => {
    setEmail('');
    setNewsletter(false);
  }, []);

  const handleNewsLetterChange = useCallback(
    (value) => setNewsletter(value),
    [],
  );

  const handleEmailChange = useCallback((value) => setEmail(value), []);

  return (
    <Form onSubmit={handleSubmit}>
      <FormLayout>
        <Checkbox
          label="Sign up for the Polaris newsletter"
          checked={newsletter}
          onChange={handleNewsLetterChange}
        />

        <TextField
          value={email}
          onChange={handleEmailChange}
          label="Email"
          type="email"
          autoComplete="email"
          helpText={
            <span>
              We’ll use this email address to inform you on future changes to
              Polaris.
            </span>
          }
        />

        <Button submit>Submit</Button>
      </FormLayout>
    </Form>
  );
}
HTML
HTML
<div>
  <form method="post">
    <div class="Polaris-FormLayout">
      <div class="Polaris-FormLayout__Item"><label class="Polaris-Choice" for="PolarisCheckbox2"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox2" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value=""><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__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.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                  </svg></span></span></span></span><span class="Polaris-Choice__Label">Sign up for the Polaris newsletter</span></label></div>
      <div class="Polaris-FormLayout__Item">
        <div class="">
          <div class="Polaris-Labelled__LabelWrapper">
            <div class="Polaris-Label"><label id="PolarisTextField2Label" for="PolarisTextField2" 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"><input id="PolarisTextField2" autocomplete="email" class="Polaris-TextField__Input" type="email" aria-describedby="PolarisTextField2HelpText" aria-labelledby="PolarisTextField2Label" aria-invalid="false" value="">
                <div class="Polaris-TextField__Backdrop"></div>
              </div>
            </div>
          </div>
          <div class="Polaris-Labelled__HelpText" id="PolarisTextField2HelpText"><span>We’ll use this email address to inform you on future changes to Polaris.</span></div>
        </div>
      </div>
      <div class="Polaris-FormLayout__Item"><button class="Polaris-Button" type="submit"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Submit</span></span></button></div>
    </div><span class="Polaris-VisuallyHidden"><button type="submit" aria-hidden="true" tabindex="-1">Submit</button></span>
  </form>
  <div id="PolarisPortalsContainer"></div>
</div>

Form without native validation

フォームで使用すると、ネイティブのフォームバリデーションを切り替えることができます。

React
React
function FormWithoutNativeValidationExample() {
  const [url, setUrl] = useState('');

  const handleSubmit = useCallback((_event) => setUrl(''), []);

  const handleUrlChange = useCallback((value) => setUrl(value), []);

  return (
    <Form noValidate onSubmit={handleSubmit}>
      <FormLayout>
        <TextField
          value={url}
          onChange={handleUrlChange}
          label="App URL"
          type="url"
          autoComplete="off"
        />

        <Button submit>Submit</Button>
      </FormLayout>
    </Form>
  );
}
HTML
HTML
<div>
  <form method="post" novalidate="">
    <div class="Polaris-FormLayout">
      <div class="Polaris-FormLayout__Item">
        <div class="">
          <div class="Polaris-Labelled__LabelWrapper">
            <div class="Polaris-Label"><label id="PolarisTextField4Label" for="PolarisTextField4" class="Polaris-Label__Text">App URL</label></div>
          </div>
          <div class="Polaris-Connected">
            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
              <div class="Polaris-TextField"><input id="PolarisTextField4" autocomplete="off" class="Polaris-TextField__Input" type="url" aria-labelledby="PolarisTextField4Label" aria-invalid="false" value="">
                <div class="Polaris-TextField__Backdrop"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-FormLayout__Item"><button class="Polaris-Button" type="submit"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Submit</span></span></button></div>
    </div><span class="Polaris-VisuallyHidden"><button type="submit" aria-hidden="true" tabindex="-1">Submit</button></span>
  </form>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

acceptCharset
string
スペースで区切られた文字エンコーディングのリスト

action
string
送信時のフォームデータの送信先

autoComplete
boolean
入力要素をオートコンプリートする機能をブラウザに付与する

children
React.ReactNode
フォーム内に表示するコンテンツ。

encType
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain"
サーバーにコンテンツを送信する際のメディアタイプ

implicitSubmit
boolean
Enterキーを押したときにフォームを送信するかどうかをトグルします。デフォルトではtrueが設定されます。

method
"post" | "get" | "action"
フォームの送信に使用される方法

name
string
フォームの一意な名前

noValidate
boolean
送信時にフォームをバリデーションするかどうか

preventDefault
boolean
デフォルトのフォームアクションをブロックする

target
"_blank" | "_self" | "_parent" | "_top" | string
フォーム送信後、回答を表示する場所

onSubmit(Required)
(event: FormEvent) => void
フォームが送信された時のコールバック

アクセシビリティ

フォームコンポーネントは、コンテンツを HTML の<form>要素で囲みます。これにより、さまざまなインタラクションや閲覧モードを使用する支援技術をサポートすることができます。

フォームには 1 つの送信ボタンしかなく、それはフォームの最後になければなりません。デフォルトでは、フォームに追加されたボタンは、競合を避けるために、type 属性がbuttonに設定されています。(type="submit")にするには、ボタンにsubmitプロパティーを設定してください。

キーボードサポート

デフォルトでは、implicitSubmitprop はtrueに設定されています。これによりマーチャントは、フォーカスがフォーム内の任意のテキストフィールドにあるときに、enter/returnキーでフォームを送信することができます。これはキーボードユーザーのためのショートカットです。この動作がフォームに合わない場合は、prop をfalseに設定してください。

ベストプラクティス

フォームコンポーネントは、以下のことに注意してください。

  • すべてのform input要素を囲む
  • カスタムonSubmitコールバックで、ネイティブの HTMLform要素の動作をエミュレートする

関連コンポーネント

Form layout

フォームレイアウトを使うと、標準的な間隔でフォーム内のフィールドを並べることができます。デフォルトでは、フィールドを垂直に積み重ねますが、水平方向のフィールドグループもサポートしています。

Web

Default form layout

記入欄を縦に重ねることで、目を通しやすく、記入しやすくなります。

React
React
<FormLayout>
  <TextField label="Store name" onChange={() => {}} autoComplete="off" />
  <TextField
    type="email"
    label="Account email"
    onChange={() => {}}
    autoComplete="email"
  />
</FormLayout>
HTML
HTML
<div>
  <div class="Polaris-FormLayout">
    <div class="Polaris-FormLayout__Item">
      <div class="">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisTextField3Label" for="PolarisTextField3" 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"><input id="PolarisTextField3" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField3Label" aria-invalid="false" value="">
              <div class="Polaris-TextField__Backdrop"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-FormLayout__Item">
      <div class="">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisTextField4Label" for="PolarisTextField4" 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"><input id="PolarisTextField4" autocomplete="email" class="Polaris-TextField__Input" type="email" aria-labelledby="PolarisTextField4Label" aria-invalid="false" value="">
              <div class="Polaris-TextField__Backdrop"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Field group

複数のフィールドを一列に並べるには、フィールドグループを使います。

市町村、州、郵便番号のフィールドを並べるなど、見慣れたレイアウトに最適です。関連性のないフィールドを隣り合わせに並べると、フィールドを見落としやすくなるので注意が必要です。

小さな画面では、フィールドグループは自動的に折り返されます。

React
React
<FormLayout>
  <FormLayout.Group>
    <TextField
      type="number"
      label="Minimum order"
      onChange={() => {}}
      autoComplete="off"
    />
    <TextField
      type="number"
      label="Maximum order"
      onChange={() => {}}
      autoComplete="off"
    />
  </FormLayout.Group>
</FormLayout>
HTML
HTML
<div>
  <div class="Polaris-FormLayout">
    <div role="group" class="Polaris-FormLayout--grouped">
      <div class="Polaris-FormLayout__Items">
        <div class="Polaris-FormLayout__Item">
          <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
              <div class="Polaris-Label"><label id="PolarisTextField7Label" for="PolarisTextField7" class="Polaris-Label__Text">Minimum order</label></div>
            </div>
            <div class="Polaris-Connected">
              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                <div class="Polaris-TextField"><input id="PolarisTextField7" autocomplete="off" class="Polaris-TextField__Input" type="number" aria-labelledby="PolarisTextField7Label" aria-invalid="false" value="">
                  <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>
        <div class="Polaris-FormLayout__Item">
          <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
              <div class="Polaris-Label"><label id="PolarisTextField8Label" for="PolarisTextField8" class="Polaris-Label__Text">Maximum order</label></div>
            </div>
            <div class="Polaris-Connected">
              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                <div class="Polaris-TextField"><input id="PolarisTextField8" autocomplete="off" class="Polaris-TextField__Input" type="number" aria-labelledby="PolarisTextField8Label" aria-invalid="false" value="">
                  <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>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Condensed field group

非常に短い入力の場合は、より多くのフィールドを列に収めるために、入力の幅を小さくすることがあります。

React
React
<FormLayout>
  <FormLayout.Group condensed>
    <TextField label="Length" onChange={() => {}} autoComplete="off" />
    <TextField label="Width" onChange={() => {}} autoComplete="off" />
    <TextField label="Height" onChange={() => {}} autoComplete="off" />
    <TextField label="Unit" onChange={() => {}} autoComplete="off" />
  </FormLayout.Group>
</FormLayout>
HTML
HTML
<div>
  <div class="Polaris-FormLayout">
    <div role="group" class="Polaris-FormLayout--condensed">
      <div class="Polaris-FormLayout__Items">
        <div class="Polaris-FormLayout__Item">
          <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
              <div class="Polaris-Label"><label id="PolarisTextField13Label" for="PolarisTextField13" class="Polaris-Label__Text">Length</label></div>
            </div>
            <div class="Polaris-Connected">
              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                <div class="Polaris-TextField"><input id="PolarisTextField13" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField13Label" aria-invalid="false" value="">
                  <div class="Polaris-TextField__Backdrop"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Polaris-FormLayout__Item">
          <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
              <div class="Polaris-Label"><label id="PolarisTextField14Label" for="PolarisTextField14" class="Polaris-Label__Text">Width</label></div>
            </div>
            <div class="Polaris-Connected">
              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                <div class="Polaris-TextField"><input id="PolarisTextField14" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField14Label" aria-invalid="false" value="">
                  <div class="Polaris-TextField__Backdrop"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Polaris-FormLayout__Item">
          <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
              <div class="Polaris-Label"><label id="PolarisTextField15Label" for="PolarisTextField15" class="Polaris-Label__Text">Height</label></div>
            </div>
            <div class="Polaris-Connected">
              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                <div class="Polaris-TextField"><input id="PolarisTextField15" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField15Label" aria-invalid="false" value="">
                  <div class="Polaris-TextField__Backdrop"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Polaris-FormLayout__Item">
          <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
              <div class="Polaris-Label"><label id="PolarisTextField16Label" for="PolarisTextField16" class="Polaris-Label__Text">Unit</label></div>
            </div>
            <div class="Polaris-Connected">
              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                <div class="Polaris-TextField"><input id="PolarisTextField16" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField16Label" aria-invalid="false" value="">
                  <div class="Polaris-TextField__Backdrop"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

children
React.ReactNode
レイアウト内に表示するコンテンツです。

Android

Default form layout

記入欄を縦に重ねることで、目を通しやすく、記入しやすくなります。

Field group

複数のフィールドを一列に並べるには、フィールドグループを使います。

市町村、州、郵便番号のフィールドを並べるなど、見慣れたレイアウトに最適です。関連性のないフィールドを隣り合わせに並べると、フィールドを見落としやすくなるので注意が必要です。

小さな画面では、フィールドグループは自動的に折り返されます。

iOS

Default form layout

記入欄を縦に重ねることで、目を通しやすく、記入しやすくなります。

Field group

複数のフィールドを一列に並べるには、フィールドグループを使います。

市町村、州、郵便番号のフィールドを並べるなど、見慣れたレイアウトに最適です。関連性のないフィールドを隣り合わせに並べると、フィールドを見落としやすくなるので注意が必要です。

小さな画面では、フィールドグループは自動的に折り返されます。

ベストプラクティス

フォームは以下のことに注意してください

  • 必要な情報だけを入力してもらうことで、お客様の時間とプライバシーに配慮する。
  • 関連するタスクをセクションのタイトルの下にまとめることで、コンテキストを提供し、インターフェイスを見やすくする。
  • 論理的で予測可能な順序に従うこと。例えば、フォームでは常にファーストネームとラストネームを尋ねること。

コンテンツガイドライン

フォームセクションタイトル

フォームのセクションタイトルは、見出しと小見出しのコンテンツガイドラインに従ってください。

フィールドラベル

ラベルは、フィールドの短い説明です。ラベルはヘルプテキストではありませんし、説明のために使用すべきではありませんが、意味があり、何が求められているかを明確に示すべきです。ラベルは以下のようにします。

  • フォームフィールドの上または横に配置する
  • 短くて簡潔であること(1 ~ 3 語)
  • 文語体(最初の単語は大文字、残りは小文字)で書かれていること。

ヘルプテキスト

ヘルプテキストは、フォームフィールドを入力する人に追加のガイダンスを提供します。このテキストは人々が無視しやすいので、マーチャントはフォームを入力する際にこのテキストに頼る必要はありません。他のフォームと同様に、ヘルプテキストは簡潔で読みやすいものでなければなりません。

関連コンポーネント

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

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