<h3 dir="auto">Problem description</h3>
<p dir="auto">When navigating through forms, tabbing into a <code class="notranslate">Toggle</code> element displays a rectangular translucent square imposed on top of the switch. I think we could do better than this. It could at least be the circular like the switch is.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Go to <a href="http://www.material-ui.com/#/components/toggle" rel="nofollow">http://www.material-ui.com/#/components/toggle</a> and <kbd>tab</kbd> through the Examples section.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.3</li>
<li>React: 15.3.0</li>
<li>Browser: Chrome</li>
</ul>
<h3 dir="auto">Images &amp; references</h3>
<p dir="auto">Default State:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1571918/17454600/2f2a2934-5b51-11e6-9461-c547655d478b.png"><img width="423" alt="screen shot 2016-08-05 at 9 11 16 pm" src="https://cloud.githubusercontent.com/assets/1571918/17454600/2f2a2934-5b51-11e6-9461-c547655d478b.png" style="max-width: 100%;"></a></p>
<p dir="auto">Keyboard Focus State:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1571918/17454602/372fe7e0-5b51-11e6-8b9a-99ba590ae725.png"><img width="417" alt="screen shot 2016-08-05 at 9 11 10 pm" src="https://cloud.githubusercontent.com/assets/1571918/17454602/372fe7e0-5b51-11e6-8b9a-99ba590ae725.png" style="max-width: 100%;"></a></p>
<p dir="auto">My recommendation would be to make it look similar to disabled state, possibly a different shade of gray.</p>
<p dir="auto">Disabled state:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1571918/17454629/fabf50c4-5b51-11e6-8552-88a8eb33b777.png"><img width="266" alt="screen shot 2016-08-05 at 9 17 02 pm" src="https://cloud.githubusercontent.com/assets/1571918/17454629/fabf50c4-5b51-11e6-8552-88a8eb33b777.png" style="max-width: 100%;"></a></p>
<p dir="auto">I'd be happy to PR this once consensus is reached on how focus state should be rendered.</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">I have a form with multiple fields. It's easy to use the keyboard to switch between fields, however when the focus switches to the toggle field, it's impossible to tell.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Create a form with a textfield and a toggle. Use tab to change focus.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.0</li>
<li>React: 15.1.0</li>
<li>Browser: Chrome, 50.0.2661.102</li>
</ul>