Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@financial-times/o-multi-select
Advanced tools
An Origami component for selecting multiple options.
Check out how to include Origami components in your project to get started with o-multi-select
.
o-multi-select
expects options to be provided in a <select>
tag. The component will automatically enhance the experience for users with JavaScript enabled.
The value must not contain whitespace characters, as it should be valid as an id attribute
<div class="o-multi-select" data-o-component="o-multi-select">
<select name="multiple" id="fruits" multiple>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<!--More options -->
</select>
</div>
To style form labels, we recommend using o-forms.
Below is an example of how to combine o-forms and o-multi-select components together. Note the label
and select
element are connected using for
and id
attributes.
<form data-o-component="o-forms">
<label for="fruits" class="o-forms-field">
<span class="o-forms-title">
<span class="o-forms-title__main">Select multiple options</span>
</span>
</label>
<div class="o-forms-input">
<div class="o-multi-select" data-o-component="o-multi-select">
<select name="multiple" id="fruits" multiple>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<!--More options -->
</select>
</div>
</div>
</form>
If you are using TSX templates we recommend that you also import GenericInput
and Form
from o-forms
. This will style labels and options for your TSX component. And you will also need to initialise component javascript in correct lifecycle of your competent. Bellow is an example for react users.
import {Form, GenericInput} from '@financial-times/o-forms/src/tsx/Form';
import {MultiSelect} from '@financial-times/o-multi-select/src/tsx/multi-select';
export const MultiSelectDefault = args => {
return (
<Form>
<GenericInput id={args.id} title={args.title}>
<MultiSelect {...args} />
</GenericInput>
</Form>
);
};
Use @include oMultiSelect()
to include styles for all o-multi-select
features.
@import '@financial-times/o-multi-select';
@include oMultiSelect();
JavaScript is initialised automatically for Origami Build Service users.
If your project is using a manual build process, initialise o-multi-select
manually. For example call the init
method to initialise all o-multi-select
instances in the document:
import oMultiSelect from 'o-multi-select';
oMultiSelect.init();
Or pass an element to initialise a specific o-multi-select
instance:
import oMultiSelect from 'o-multi-select';
const oMultiSelectElement = document.getElementById(
'#my-o-multi-select-element'
);
oMultiSelect.init(oMultiSelectElement);
o-multi-select
dispatches a custom event oMultiSelect.OptionChange
that bubbles. It is triggered when an option gets selected or removed. The event data has the following interface:
detail: {
optionElement: HTMLelement, // The elements that was selected or deselected
value: string, // Value of selected/deselected option
selected: boolean, // If element is selected or not
index: number, // Index of option in the array of options
instance, // Instance of multiselect element
}
Key | Function |
---|---|
Enter, Space, Up Arrow or Down Arrow | All these keys will expand the suggestions menu, and focus will be on the first option, or the most recently highlighted option. |
Key | Function |
---|---|
Enter |
|
Space |
|
Tab |
|
Up Arrow | moves focus to the previous option, if one exists. If focus is already on the first option, it will not move. |
Down Arrow | moves focus to the next option, if one exists. If focus is already on the last option, it will not move. |
PageUp | Jumps visual focus up 10 options (or to first option). |
PageDown | Jumps visual focus down 10 options (or to last option). |
Home/End | moves focus to the first or last option. |
Escape |
|
State | Major Version | Last Minor Release | Migration guide |
---|---|---|---|
✨ active | 2 | 2.0 | migrate to v2 |
⚠ maintained | 1 | 1.0 | N/A |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email origami.support@ft.com.
This software is published by the Financial Times under the MIT licence.
FAQs
Multi select component
We found that @financial-times/o-multi-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.