SelectField
fw-select
A customizable, themeable replacement for the native <select> element, with options for searchability and mobile-native rendering.
Usage
HTML (Auto-init)
HTML
<select class="fw-select" id="country">
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
<script>
FormWidgets.autoInit();
</script>JavaScript Initialization
JavaScript
FormWidgets.init('#country', 'SelectField', {
placeholder: 'Please choose a country...',
searchable: true
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| icon | string | 'list' | Name of the SVG icon to use from the internal icon set. |
| placeholder | string | 'Select an option...' | Placeholder text shown when no option is selected. |
| required | boolean | false | Marks the field as required. |
| searchable | boolean | false | If true, adds a search input to the dropdown to filter options. |
| nativeOnMobile | boolean | true | If true, the native browser <select> UI is used on mobile devices for better usability. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-icon | icon | data-icon="list" |
| data-placeholder | placeholder | data-placeholder="Choose..." |
| data-required | required | data-required="true" |
| data-searchable | searchable | data-searchable="true" |
| data-native-on-mobile | nativeOnMobile | data-native-on-mobile="false" |
Features
Searchable
Quickly find options in long lists with the built-in search filter.
Mobile Friendly
Defaults to the native mobile UI for the best user experience on small screens.
Keyboard Accessible
Full keyboard navigation support for opening, closing, and selecting options.
Themeable
Fully styled with CSS variables to match your application's theme.