## Select Field

A choice picker for easy user selection.
Demo
Required Imports
import { InputFieldSelectModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Required
--- | --- | --- | ---
Input | multiple | Enables multi-selection if set to true. | false
Input | label | The label text displayed above the input field. | false
Input | placeholder | Placeholder text displayed inside the input field. | false
Input | optionLabel | Property of the option used to display the label in the dropdown. | true
Input | optionValue | Property of the option used as the value for the form control. | true
Input | options | An array of options available for selection. | true
Input | optionsTemplates | An array of templates to customize the option display. | false
Input | filterBy | Property used for filtering the options. | false
Input | enableFilter | If true, enables the filter functionality for the options. | false
Input | readonly | Sets the input field to readonly mode. | false
Input | disabled | Disables the input field if set to true. | false
Input | showClear | Displays a clear button to clear the selection. | false
Input | editable | If true, makes the input field editable. | false
Input | withTemplate | Determines if custom templates are used for displaying options. | false
Input | enableTranslation | If true, enables translation support for the options and label. | false

CSS Properties

Name | Description
--- | ---
`--border-radius` | Border radius of input and it's container.
`--input-field-margin` | Margin around input field to separate other content like error messages.
`--label-font-size-floated` | Label font size after floated to top.
`--label-color` | Label text color.
`--label-position-left` | Label position distance from left.
`--label-position-top` | Label position distance from top.
`--label-float-position-top` | Label top position after floated to top.
`--label-padding` | Label padding to make space around.
`--label-font-family` | Font family for label.
`--label-font-style` | Font style for label.
`--label-font-weight` | Font weight for label.
`--label-font-size` | Label font size.
`--label-line-height` | Label line height.
`--input-font-color` | Input text color.
`--input-font-family` | Font family for input field.
`--input-font-size` | Font size for input text.
`--height` | Height of the input field.
`--width` | Width of the input field.
`--input-border` | Border around input field only.
`--input-padding` | Input field space inside.
`--box-shadow` | Input field box shadow.
`--border` | Border around the full component.
`--dropdown-background` | dropdown background color.
`--input-icon-color` | dropdown icon color.

Example usage
`{{ codeExample }}`