When creating forms ONLY use fieldset & legend around groups of items that need that group indicated for a screen reader

<div class="form-field form-field--input">
<label for="name-here">Text input label</label>
<input type="text" name="value-here" placeholder="value-here" id="name-here">
</div>
              

<div class="form-field form-field--input form-field--small">
<label for="name-here">Text input label</label>
<input type="text" name="value-here" placeholder="value-here" id="name-here">
</div>
              

<div class="form-field form-field--input form-field--full-width">
<label for="name-here">Text input label</label>
<input type="text" name="value-here" placeholder="value-here" id="name-here">
</div>
              

<div class="form-field form-field--input">
<label for="name-here" class="required">Text input label</label>
<input type="text" name="value-here" placeholder="value-here" id="name-here">
</div>
               

<div class="form-field form-field--input">
<label for="name-here">Text input label</label>
<input type="text" name="Text here" placeholder="" id="name-here" disabled>
</div>
              

Textarea

<div class="form-field form-field--textarea">
<label for="name-here">Text area label</label>
<textarea rows="4" cols="50" id="name-here"></textarea>
</div>
               

Textarea full width

<div class="form-field form-field--textarea form-field--full-width">
<label for="name-here">Text area label</label>
<textarea rows="4" cols="50" id="name-here"></textarea>
</div>
               

Basic select

<div class="form-field form-field--select">
<label for="name-here">Select label</label>
<select name="demo" id="name-here">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
               

Basic select small

<div class="form-field form-field--select form-field--small">
<label for="name-here">Select label</label>
<select name="demo" id="name-here">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
               

Basic select full width

<div class="form-field form-field--select form-field--full-width">
<label for="name-here">Select label</label>
<select name="demo" id="name-here">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
               

Basic select disabled

<div class="form-field form-field--select">
<label for="name-here">Select label</label>
<select name="demo" id="name-here" disabled>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
               

Radio buttons

<div class="form-field form-field--radio">
<input type="radio" name="demo" value="value-here" id="name-here" class="form-radio" checked>
<label for="name-here">Radio label 1 (checked)</label>
</div>
               

<div class="form-field form-field--radio">
<input type="radio" name="demo" value="value-here" id="name-here" class="form-radio">
<label for="name-here">Radio label 2</label>
</div>
               

<div class="form-field form-field--radio">
<input type="radio" name="demo" value="value-here" id="name-here" class="form-radio" disabled>
<label for="name-here">Radio label disabled</label>
</div>
               

Checkboxes

<div class="form-field form-field--checkbox">
<input type="checkbox" name="demo" value="value-here" id="name-here" class="form-checkbox" checked>
<label for="name-here">Checkbox label 1 (checked)</label>
</div>
               

<div class="form-field form-field--checkbox">
<input type="checkbox" name="demo" value="value-here" id="name-here" class="form-checkbox">
<label for="name-here">Checkbox label 2</label>
</div>
               

<div class="form-field form-field--checkbox">
<input type="checkbox" name="demo" value="value-here" id="name-here" class="form-checkbox" disabled>
<label for="name-here">Checkbox label disabled</label>
</div>
               

Example of related form fields with fieldset + legend (more info)

<div class="form-group form-group--checkbox">



<fieldset>
<legend>These items belong together</legend>

<div class="form-field form-field--checkbox">
<input type="checkbox" name="demo" value="value-here" id="name-here" class="form-checkbox" checked>
<label for="name-here">Checkbox label 1 (checked)</label>
</div>

<div class="form-field form-field--checkbox">
<input type="checkbox" name="demo" value="value-here" id="name-here" class="form-checkbox">
<label for="name-here">Checkbox label 2</label>
</div>

<div class="form-field form-field--checkbox">
<input type="checkbox" name="demo" value="value-here" id="name-here" class="form-checkbox">
<label for="name-here">Checkbox label 3</label>
</div>

</fieldset>

</div>