Form

<c-bs-form>
  <c-bs-form-group control_id="exampleInputEmail1">
    <c-bs-form-label>Email address</c-bs-form-label>
    <c-bs-form-control type="email" />
  </c-bs-form-group>
  <c-bs-button type="submit" variant="primary">Submit</c-bs-button>
</c-bs-form>

<c-bs-form-group control_id="exampleInputEmail1">
  <c-bs-form-label>Email address</c-bs-form-label>
  <c-bs-form-control type="email" />
  <c-bs-form-text>We'll never share your email with anyone else.</c-bs-form-text>
</c-bs-form-group>

<c-bs-form-check label="Check me out" c-attrs="{'id': 'exampleCheck1'}" />

<c-bs-form-check type="radio" name="exampleRadio" label="Option one" c-attrs="{'id': 'exampleRadio1'}" />

<c-bs-form-control size="lg" placeholder=".form-control-lg" />
<c-bs-form-control placeholder="Default input" />
<c-bs-form-control size="sm" placeholder=".form-control-sm" />

<c-bs-form-control placeholder="Disabled input" c-disabled="True" />

<c-bs-form-control placeholder="Readonly input" c-readonly="True" value="readonly" />

<c-bs-form-check c-inline="True" value="option1" label="1" c-attrs="{'id': 'inlineCheckbox1'}" />
<c-bs-form-check c-inline="True" value="option2" label="2" c-attrs="{'id': 'inlineCheckbox2'}" />

<c-bs-form-check label="Disabled checkbox" c-disabled="True" c-attrs="{'id': 'disabledCheck'}" />

<c-bs-form-check type="switch" label="Default switch checkbox input" c-attrs="{'id': 'flexSwitchCheckDefault'}" />

<c-bs-form-range />

<c-bs-form-range c-disabled="True" />

<c-bs-form-range c-min="0" c-max="5" />

<c-bs-form-range c-min="0" c-max="5" c-step="0.5" />

<c-bs-input-group>
  <c-bs-input-group-text>@</c-bs-input-group-text>
  <c-bs-form-control placeholder="Username" />
</c-bs-input-group>

<c-bs-input-group>
  <c-bs-button variant="outline-secondary" type="button">Button</c-bs-button>
  <c-bs-form-control c-placeholder="''" />
</c-bs-input-group>

<c-bs-input-group>
  <c-bs-input-group-checkbox c-attrs="{'value': ''}" />
  <c-bs-form-control />
</c-bs-input-group>

<c-bs-input-group>
  <c-bs-input-group-radio c-attrs="{'value': ''}" />
  <c-bs-form-control />
</c-bs-input-group>

<c-bs-input-group size="sm">
  <c-bs-input-group-text>Small</c-bs-input-group-text>
  <c-bs-form-control />
</c-bs-input-group>
<c-bs-input-group>
  <c-bs-input-group-text>Default</c-bs-input-group-text>
  <c-bs-form-control />
</c-bs-input-group>
<c-bs-input-group size="lg">
  <c-bs-input-group-text>Large</c-bs-input-group-text>
  <c-bs-form-control />
</c-bs-input-group>

<c-bs-input-group>
  <c-bs-input-group-text>First and last name</c-bs-input-group-text>
  <c-bs-form-control />
  <c-bs-form-control />
</c-bs-input-group>

<c-bs-input-group>
  <c-bs-input-group-text>$</c-bs-input-group-text>
  <c-bs-input-group-text>0.00</c-bs-input-group-text>
  <c-bs-form-control />
</c-bs-input-group>

<c-bs-floating-label label="Email address" control_id="floatingInput">
  <c-bs-form-control type="email" placeholder="name@example.com" />
</c-bs-floating-label>

<c-bs-floating-label label="Comments" control_id="floatingTextarea">
  <c-bs-form-textarea placeholder="Leave a comment here" c-attrs="{'style': 'height: 100px', 'rows': '5'}" />
</c-bs-floating-label>

<c-bs-floating-label label="Works with selects" control_id="floatingSelect">
  <c-bs-form-select>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </c-bs-form-select>
</c-bs-floating-label>

<c-bs-form-floating>
  <c-bs-form-control type="email" placeholder="name@example.com" c-attrs="{'id': 'floatingInputCustom'}" />
  <label for="floatingInputCustom">Email address</label>
</c-bs-form-floating>