Single Select
Type: React component
How to get SingleSelect?
JavaScript
import { SingleSelect } from 'fds/components';
A DropAnchor with an ItemsMenu inside a Drop, used for selecting a single item. The selected item is displayed as the label of the Button.
Props
icon
Placeholder (Optional)
Type: String
The placeholder icon displayed in the button when no value has been selected in the single select yet.
Default value
is
Disabled (Optional)
Type: Boolean
Whether or not the component should be rendered in a disabled state.
Default value
is
Full Width (Optional)
Type: Boolean
Whether or not the component grows to the full available width.
Default value
items
(Required)
Type: Object
An item with a label property with a string value to display and a property to hold the actual value.
Properties
name
(Optional)
Type: String
The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.
Default value
on
Change (Optional)
Type: Function
A callback that is called whenever a component's value changes.
This callback is called just before the "validate" prop is called.
Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.
Arguments
Default value
on
Ref (Optional)
Type: Function
A callback that is called whenever a component's ref changes.
Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.
For more information about React and "refs", check the React documentation
Arguments
Returns
placeholder
(Optional)
Type: String
The placeholder text displayed in component when it is empty, i.e. has no values.
Default value
tooltip
Content (Optional)
Type: String | ReactElement
The content of the tooltip that is displayed when hovering over the whole component.
-
string: the textual content of the tooltip
-
ReactElement: a React Element (instance of a React Component, usually created with JSX)
Default value
-
validate
(Optional)
Type: Function
A callback that is called directly after the value(s) of a form component change(s).
Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.
Arguments
Returns
Default value
value
(Optional)
Type: Any
The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).
Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.
Default value