(react) add select mono option custom render

We want to be able to render the options in a customized manner.
This commit is contained in:
Nathan Vasse
2023-10-06 16:54:55 +02:00
committed by NathanVss
parent 611eebf0a4
commit 48e4e56a44
11 changed files with 358 additions and 21 deletions

View File

@@ -103,6 +103,19 @@ For some reasons you might want to hide the label of the select. You can do that
<Story id="components-forms-select-mono--hidden-label"/>
</Canvas>
## Custom render option
You can give customize the look of the options by providing `render` callback.
> When you provide `render` the fields `label` and `value` are mandatory.
Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
HTML or with its `label`. It is set to `true` by default.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--custom-render"/>
</Canvas>
## Controlled / Non Controlled
Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below