Options :: Select :: Primer ViewComponents v0.38.0

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<!-- With caption -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list-1">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-65940e5a-ed77-4b7b-9377-c408df3dc7c3 caption-65940e5a-ed77-4b7b-9377-c408df3dc7c3" class="FormControl-select FormControl-medium" name="my-select-list-1" id="my-select-list-1"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-65940e5a-ed77-4b7b-9377-c408df3dc7c3" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
  <span class="FormControl-caption" id="caption-65940e5a-ed77-4b7b-9377-c408df3dc7c3">With a caption</span>
</div>
<!-- Visually hidden label -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="sr-only FormControl-label" for="my-select-list-2">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-e0c092b8-5a9d-4a56-9596-d5211c964bd3" class="FormControl-select FormControl-medium" name="my-select-list-2" id="my-select-list-2"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-e0c092b8-5a9d-4a56-9596-d5211c964bd3" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Full width -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list-3">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-3e9c812c-e481-4e43-b73a-eeb610d2bf62" class="FormControl-select FormControl-medium" name="my-select-list-3" id="my-select-list-3"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-3e9c812c-e481-4e43-b73a-eeb610d2bf62" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Not full width -->
<div class="FormControl">
  <label class="FormControl-label" for="my-select-list-4">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-e181d552-a5ff-4b45-ac48-9f4a9c174de3" class="FormControl-select FormControl-medium" name="my-select-list-4" id="my-select-list-4"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-e181d552-a5ff-4b45-ac48-9f4a9c174de3" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Disabled -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list-5">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select disabled="disabled" aria-describedby="validation-25ec7dd2-21ed-4cb3-852c-b7aa0e1e32fe" class="FormControl-select FormControl-medium" name="my-select-list-5" id="my-select-list-5"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-25ec7dd2-21ed-4cb3-852c-b7aa0e1e32fe" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Invalid -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list-6">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select invalid="true" aria-invalid="true" aria-describedby="validation-d948cc4a-2b95-47bb-8a37-02654346623a" class="FormControl-select FormControl-medium" name="my-select-list-6" id="my-select-list-6"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-d948cc4a-2b95-47bb-8a37-02654346623a" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- With validation message -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select invalid="true" aria-invalid="true" aria-describedby="validation-1449d75c-50c2-4e11-83d6-3fbaa87a3cbc" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-1449d75c-50c2-4e11-83d6-3fbaa87a3cbc">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span>An error occurred!</span>
  </div>
</div>

# With caption
render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list-1", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Visually hidden label
render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list-2", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Full width
render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list-3", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Not full width
render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list-4", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Disabled
render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list-5", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Invalid
render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list-6", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# With validation message
render(Primer::Alpha::Select.new(validation_message: "An error occurred!", name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end

No matching results.

No matching results.

Embed Code

Embed URL

Previews

No matching results.

Pages

No matching results.