*/ private array $macros = []; public function __construct(Environment $env) { parent::__construct($env); $this->source = $this->getSourceContext(); $this->parent = false; $this->blocks = [ ]; } protected function doDisplay(array $context, array $blocks = []): iterable { $macros = $this->macros; $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"]; $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/forms-select.html.twig")); $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"]; $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/forms-select.html.twig")); // line 1 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/main.html.twig"); yield " "; // line 5 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/title-meta.html.twig", ["title" => "Form Select"]); yield " "; // line 7 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/head-css.html.twig"); yield "
"; // line 16 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/menu.html.twig"); yield "
"; // line 26 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/page-title.html.twig", ["pagetitle" => "Forms", "title" => "Form Select"]); yield "

Default Select

Use <select> attribute with numerous options to show value with choice's option.

 <select class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 <select class="form-select rounded-pill mb-3" aria-label="Default select example">
    <option selected>Search for services</option>
    <option value="1">Information Architecture</option>
    <option value="2">UI/UX Design</option>
    <option value="3">Back End Development</option>
</select>

<select class="form-select" aria-label="Disabled select example" disabled>
    <option selected>Open this select menu (Disabled)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Menu Size

Use multiple attribute to select multiple values and size=\"your value\" attribute to show a number of choice option within a select area. 

<select class="form-select" multiple aria-label="multiple select example">
    <option selected>Open this select menu (multiple select option)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select" size="3" aria-label="size 3 select example">
    <option selected>Open this select menu (select menu size)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Select Size

Use form-select-sm class to set small select size and form-select-lg class to form-select class to set large select size. No such class is required for default select size.

<select class="form-select form-select-sm  mb-3" aria-label=".form-select-sm example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-lg" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Choices

Single select input Example

Set data-choices attribute to set a default single select.

Set data-choices data-choices-groups attribute to set option group

Set data-choices data-choices-search-false data-choices-removeItem

Set data-choices data-choices-sorting-false attribute.

Multiple select input

Set data-choices multiple attribute.

Set data-choices data-choices-removeItem multiple attribute.

Set data-choices data-choices-multiple-groups=\"true\" multiple attribute.

Text inputs

Set data-choices data-choices-limit=\"Required Limit\" data-choices-removeItem attribute.

Set data-choices data-choices-text-unique-true attribute.

Set data-choices data-choices-text-disabled-true attribute.

"; // line 464 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/footer.html.twig"); yield "
"; // line 473 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/customizer.html.twig"); yield " "; // line 475 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/vendor-scripts.html.twig"); yield " "; $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof); $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof); yield from []; } /** * @codeCoverageIgnore */ public function getTemplateName(): string { return "theme/forms-select.html.twig"; } /** * @codeCoverageIgnore */ public function isTraitable(): bool { return false; } /** * @codeCoverageIgnore */ public function getDebugInfo(): array { return array ( 543 => 475, 538 => 473, 526 => 464, 85 => 26, 72 => 16, 60 => 7, 55 => 5, 48 => 1,); } public function getSourceContext(): Source { return new Source("{{ include('theme/partials/main.html.twig') }} {{ include('theme/partials/title-meta.html.twig', {title: 'Form Select'}) }} {{ include('theme/partials/head-css.html.twig') }}
{{ include('theme/partials/menu.html.twig') }}
{{ include('theme/partials/page-title.html.twig', {pagetitle: 'Forms', title: 'Form Select'}) }}

Default Select

Use <select> attribute with numerous options to show value with choice's option.

 <select class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 <select class="form-select rounded-pill mb-3" aria-label="Default select example">
    <option selected>Search for services</option>
    <option value="1">Information Architecture</option>
    <option value="2">UI/UX Design</option>
    <option value="3">Back End Development</option>
</select>

<select class="form-select" aria-label="Disabled select example" disabled>
    <option selected>Open this select menu (Disabled)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Menu Size

Use multiple attribute to select multiple values and size=\"your value\" attribute to show a number of choice option within a select area. 

<select class="form-select" multiple aria-label="multiple select example">
    <option selected>Open this select menu (multiple select option)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select" size="3" aria-label="size 3 select example">
    <option selected>Open this select menu (select menu size)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Select Size

Use form-select-sm class to set small select size and form-select-lg class to form-select class to set large select size. No such class is required for default select size.

<select class="form-select form-select-sm  mb-3" aria-label=".form-select-sm example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-lg" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Choices

Single select input Example

Set data-choices attribute to set a default single select.

Set data-choices data-choices-groups attribute to set option group

Set data-choices data-choices-search-false data-choices-removeItem

Set data-choices data-choices-sorting-false attribute.

Multiple select input

Set data-choices multiple attribute.

Set data-choices data-choices-removeItem multiple attribute.

Set data-choices data-choices-multiple-groups=\"true\" multiple attribute.

Text inputs

Set data-choices data-choices-limit=\"Required Limit\" data-choices-removeItem attribute.

Set data-choices data-choices-text-unique-true attribute.

Set data-choices data-choices-text-disabled-true attribute.

{{ include('theme/partials/footer.html.twig') }}
{{ include('theme/partials/customizer.html.twig') }} {{ include('theme/partials/vendor-scripts.html.twig') }} ", "theme/forms-select.html.twig", "/var/www/cds-intranet/app/templates/theme/forms-select.html.twig"); } }