Styleguide

ID

Category

Namespace

All Colors

sw-Button

/src/assets/css/namespace/sitewide/_Button.scss

ボタンのデフォルトスタイルです。

aタグボタンaタグボタン 
.l-Wrapper
  a.sw-Button(href="#") aタグボタン
  a.sw-Button.-disabled(href="#" tabindex="-1") aタグボタン
  button.sw-Button#foo(type="button") buttonタグボタン
  button.sw-Button(disabled type="button") buttonタグボタン
  input.sw-Button(type="button" value="inputボタン")
  input.sw-Button(type="button" value="inputボタン" disabled)

.-fullを追加すると横幅100%になります。

デフォルト横幅100%
.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button.-full(href="#") 横幅100%

.-autoを追加すると横幅はなりゆきになります。

デフォルト横幅なりゆき
.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button.-auto(href="#") 横幅なりゆき

.sw-Button_Moreを追加すると矢印が付きます。

デフォルト矢印付きボタン 
.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button(href="#")
    | 矢印付きボタン
    svg.sw-Button_More(role="img")
      use(xlink:href="/assets/svg/sprite.svg#right-arrow1")

sw-FormCheckbox

/src/assets/css/namespace/sitewide/_FormCheckbox.scss

type="checkbox"のデフォルトスタイルです。

チェックボックス 
fieldset.l-Wrapper
  legend.sw-FormLabel チェックボックス

  input.sw-FormCheckbox(type="checkbox" id="checkbox1" name="checkbox1" value="0")
  label(for="checkbox1")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス1

  input.sw-FormCheckbox(type="checkbox" id="checkbox2" name="checkbox1" value="1")
  label(for="checkbox2")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス2チェックボックス2チェックボックス2

必須項目のエラー表示。

名前（必須）

いずれかを選択してください

fieldset.l-Wrapper
  legend.sw-FormLabel
    | 名前
    em.sw-FormLabel_RequireA （必須）

  input.sw-FormCheckbox.-error(type="checkbox" id="checkbox3" name="checkbox1" value="0")
  label(for="checkbox3")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス3

  input.sw-FormCheckbox.-error(type="checkbox" id="checkbox4" name="checkbox1" value="1")
  label(for="checkbox4")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス4

  p.sw-FormHelp
    strong いずれかを選択してください

非活性状態。

チェックボックス 
fieldset.l-Wrapper
  legend.sw-FormLabel チェックボックス

  input.sw-FormCheckbox(type="checkbox" id="checkbox5" name="checkbox5" value="0" disabled)
  label(for="checkbox5")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス5

sw-FormHelp

/src/assets/css/namespace/sitewide/_FormHelp.scss

エラーメッセージです。

名前を入力してください

.l-Wrapper
  label.sw-FormLabel(for="form-help1") 名前
  input.sw-FormInput.-error(id="form-help1" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")
  p.sw-FormHelp
    strong 名前を入力してください

sw-FormInput

/src/assets/css/namespace/sitewide/_FormInput.scss

<input>タグのデフォルトスタイルです。

.l-Wrapper
  label.sw-FormLabel(for="input1") 名前
  input.sw-FormInput(id="input1" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

typeとautocompleteの使用例。

.l-Wrapper
  input.sw-FormInput(id="input2" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")
  input.sw-FormInput(id="input3" type="text" name="nameKana" autocomplete="name" placeholder="例）ヤマダ タロウ")
  input.sw-FormInput(id="input4" type="email" name="email" autocomplete="email" placeholder="例）example@gmail.com")
  input.sw-FormInput(id="input5" type="tel" name="tel" autocomplete="tel" placeholder="例）0120-117-117")
  input.sw-FormInput(id="input6" type="number" name="postalCode" autocomplete="postal-code" placeholder="例）105-0011")

必須項目のエラー表示。

名前を入力してください

.l-Wrapper
  label.sw-FormLabel(for="input7")
    | 名前
    em.sw-FormLabel_RequireA （必須）
  input.sw-FormInput.-error(id="input7" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")
  p.sw-FormHelp
    strong 名前を入力してください

非活性状態。

.l-Wrapper
  label.sw-FormLabel(for="input8") 名前
  input.sw-FormInput(id="input8" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎" disabled)

sw-FormLabel

/src/assets/css/namespace/sitewide/_FormLabel.scss

フォーム要素のラベルです。labelとlegendのどちらでも使用可能です。 レイアウトは別のラップ要素で指定してください。

.l-Wrapper
  label.sw-FormLabel(for="form-label1") 名前
  input.sw-FormInput(id="form-label1" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

必須項目1。

.l-Wrapper
  label.sw-FormLabel(for="form-label2")
    | 名前
    em.sw-FormLabel_RequireA （必須）
  input.sw-FormInput(id="form-label2" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

必須項目2。

.l-Wrapper
  label.sw-FormLabel(for="form-label3")
    | 名前
    em.sw-FormLabel_RequireB 必須
  input.sw-FormInput(id="form-label3" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

注意事項。

.l-Wrapper
  label.sw-FormLabel(for="form-label4")
    | 名前
    em.sw-FormLabel_RequireB 必須
    small.sw-FormLabel_Note 入力時の注意事項
  input.sw-FormInput(id="form-label4" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

sw-FormRadio

/src/assets/css/namespace/sitewide/_FormRadio.scss

type="radio"のデフォルトスタイルです。

ラジオボタン 
fieldset.l-Wrapper
  legend.sw-FormLabel ラジオボタン

  input.sw-FormRadio(type="radio" id="radio1" name="radio1" value="0" checked)
  label(for="radio1")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン1

  input.sw-FormRadio(type="radio" id="radio2" name="radio1" value="1")
  label(for="radio2")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン2ラジオボタン2ラジオボタン2

必須項目のエラー表示。

ラジオボタン（必須）

いずれかを選択してください

fieldset.l-Wrapper
  legend.sw-FormLabel
    | ラジオボタン
    em.sw-FormLabel_RequireA （必須）

  input.sw-FormRadio.-error(type="radio" id="radio3" name="radio2" value="0")
  label(for="radio3")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン3

  input.sw-FormRadio.-error(type="radio" id="radio4" name="radio2" value="1")
  label(for="radio4")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン4

  p.sw-FormHelp
    strong いずれかを選択してください

非活性状態。

ラジオボタン 
fieldset.l-Wrapper
  legend.sw-FormLabel ラジオボタン

  input.sw-FormRadio(disabled type="radio" id="radio5" name="radio3" value="0")
  label(for="radio5")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン5

sw-FormSelect

/src/assets/css/namespace/sitewide/_FormSelect.scss

<select>タグのデフォルトスタイルです。

.l-Wrapper
  label.sw-FormLabel(for="prefecture1")
    | 都道府県
  .sw-FormSelect
    select(name="prefecture1")
      option(value="0") 選択してください
      option(value="1") 北海道
      option(value="2") 秋田
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#select1")

必須項目のエラー表示。

都道府県を選択してください

.l-Wrapper
  label.sw-FormLabel(for="prefecture2")
    | 都道府県
    em.sw-FormLabel_RequireA （必須）
  .sw-FormSelect.-error
    select(name="prefecture2")
      option(value="0") 選択してください
      option(value="1") 北海道
      option(value="2") 秋田
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#select1")
  p.sw-FormHelp
    strong 都道府県を選択してください

非活性状態。

.l-Wrapper
  label.sw-FormLabel(for="prefecture3")
    | 都道府県
  .sw-FormSelect.is-disabled
    select(name="prefecture3" disabled)
      option(value="0") 選択してください
      option(value="1") 北海道
      option(value="2") 秋田
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#select1")

sw-FormTextarea

/src/assets/css/namespace/sitewide/_FormTextarea.scss

<textarea>のデフォルトスタイルです。

.l-Wrapper
  label.sw-FormLabel(for="textarea1") お問い合わせ内容
  textarea.sw-FormTextarea(id="textarea1" name="textarea1" placeholder="例）お問い合わせ内容")

高さを出したバリエーション。

.l-Wrapper
  label.sw-FormLabel(for="textarea2") お問い合わせ内容
  textarea.sw-FormTextarea.-large(id="textarea2" name="textarea2" placeholder="例）お問い合わせ内容")

必須項目のエラー表示。

お問い合わせ内容を入力してください

.l-Wrapper
  label.sw-FormLabel(for="textarea3")
    | お問い合わせ内容
    em.sw-FormLabel_RequireA （必須）
  textarea.sw-FormTextarea.-error(id="textarea3" name="textarea3" placeholder="例）お問い合わせ内容")
  p.sw-FormHelp
    strong お問い合わせ内容を入力してください

非活性状態。

.l-Wrapper
  label.sw-FormLabel(for="textarea4") お問い合わせ内容
  textarea.sw-FormTextarea(id="textarea4" name="textarea4" placeholder="例）お問い合わせ内容" disabled)

sw-Label

/src/assets/css/namespace/sitewide/_Label.scss

インラインで表示するラベルコンポーネントです。

spanタグのラベルです。 aタグのラベルです。 
.l-Wrapper
  span.sw-Label spanタグのラベルです。
  label.sw-Label labelタグのラベルです。
  a.sw-Label(href="#") aタグのラベルです。