Use Case: Inline Inputs An example of a inline inputs. Important Notes: Use a bolt-list with display set to inline, and pass each input as an item. This will create an inline layout with multiple inputs. The width of each input will be adjusted to fit its content. Use a bolt-list with display set to flex, and pass each input as an item. This will create a flexible layout with multiple inputs. The width of each input will be adjusted to the available space to fill up the full width of the layout. Demo Inline inputs: auto width
Inline inputs: flexible width
Twig
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter email address',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}

{% set submit_button %}
  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Sign Up Now',
    type: 'submit'
  } only %}
{% endset %}

{% include '@bolt-components-list/list.twig' with {
  display: 'inline',
  spacing: 'xsmall',
  align: 'start',
  valign: 'start',
  items: [
    form_children,
    submit_button
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.