Belle’s option component

Use in your code Learn more
bit import belle.react-components/components/option

Belle’s option component. Should be used together with the select component

In addition to the props listed below, you can also use any property valid for a HTML div like style, id, className, …


More info

See live examples.

For extended info, go to Belle documentation.


Standard example

<!-- basic select example with multiple options -->
<Option value="berlin">Berlin</Option>
<Option value="tokyo">Tokyo</Option>
<Option value="vienna">Vienna</Option>



(optional) Works like React’s built-in style property. Becomes active once the user hovers over the Option with the cursor or focus on it by leveragin the key board inputs like Arrow-down or Arrow-up.


(required) The value to be set in case this Option is selected. The value must be unique for all Options within one Select. It can be of type Boolean, String or Number.

Test Summary

Option should initialise _isDisplayedAsSelected during constructionTests didn't run
Option should show the select style in case _isDisplayedAsSelected is trueTests didn't run
Option should show the hover style in case _isHovered is trueTests didn't run
Option should be able to provide custom propertiesTests didn't run