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

Question

I would like to recreate the following Dropdown from Semantic UI, in which a <label> is inserted for the dropdown menu using UI React:

(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!

BravoZulu · Accepted Answer · 2017-06-12 15:03:54Z

9

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

<Form>
  <Form.Dropdown
    label='Gender'
    options={//your array of options}
    selection
  />
</Form>

answered Jun 12, 2017 at 15:03

BravoZulu

1,14013 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

allthesignals Over a year ago

Thank you! This works great. I understand the structure of how this React lib works a little better now.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related