<p dir="auto">So. I want to add a button on the label of RadioButton.<br>
For example, 'remove the option' button.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Expecting to be able to add MORE THAN JUST TEXT in the label of a radio...</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Currently I replace the RadioButton with just a div, and cant add component inside the label.<br>
Getting this message:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`"><pre class="notranslate"><code class="notranslate">input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>create RadioButtonGroup</li>
<li>create RadioButton inside it</li>
<li>add RaisedButton to the label of the RadioButton.</li>
<li>See '[object Object]' instead of the actual results.</li>
</ol>
<h2 dir="auto">Context</h2>

<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.18.5</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome 63.0.3239.132</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">A weird yellow highlight appears when opening a temporary drawer.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">There should not be a yellow highlight</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">A weird yellow border appears around the drawer.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/787914/32808226-9c371e8c-c992-11e7-8ef8-14ccce8d8641.png"><img src="https://user-images.githubusercontent.com/787914/32808226-9c371e8c-c992-11e7-8ef8-14ccce8d8641.png" alt="bug" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Navigate to <a href="https://material-ui.com/" rel="nofollow">https://material-ui.com/</a></li>
<li>Make use of chrome dev tools to enable the response device layout</li>
<li>Make viewport width smaller untill the responsive menu icon appears in AppBar</li>
<li>Press the menu icon to open the drawer</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I suspect this issue has to do with :focus, because the border dissappears when clicking somewhere else besides the drawer.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62.0.3202.94</td>
</tr>
<tr>
<td>os</td>
<td>Windows 10</td>
</tr>
</tbody>
</table>