allthesignals allthesignals -4 years ago 222
HTML Question

How to insert label element in Semantic UI + React Dropdown component?

I would like to recreate the following Dropdown from Semantic UI, in which a

<label>
is inserted for the dropdown menu using UI React:
Semantic UI Dropdown Menu

(https://semantic-ui.com/collections/form.html#dropdown)

This is the markdown I'd like my React app to create:

<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>


I'm struggling to accomplish this with the React UI implementation of Semantic UI.

My current attempt is this:

<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />


It's very important that this is labeled clearly. I've found in user research that the placeholder is confusing as a question prompt alone.

There is documentation for adding a label, however, it requires nesting child components under Dropdown component, which interferes with my use of the "options" prop. Error is as follows:


Warning: Failed prop type: Prop
children
in
Dropdown
conflicts
with props:
options
,
selection
. They cannot be defined together,
choose one or the other


Thank you, Stackoverflow!

Answer Source

If you are using it inside a Form you can do:

<Form>
  <Form.Dropdown
    label='Gender'
    options={//your array of options}
    selection
  />
</Form>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download