Switch
Switch was briefly at various points in the doc; however, it certainly deserves a its own page so you know how to give your app that mobile-like vibe ๐ฑ.
Basic Switch
caution
Switch is not compatible with p-default or p-icon
Similar to Checkbox and Radio, switch contains a similar DOM structure, but we use p-switch instead of the default style with p-default:
<div class="pretty p-switch">
<input type="checkbox" />
<div class="state">
<label>Switch</label>
</div>
</div>
Shapes & Colors
caution
Switch is not compatible with outline colors
Switch has three unique shapes that can be used: p-outline, p-fill, and p-slim.
<div class="pretty p-switch">
<input type="checkbox" />
<div class="state">
<label>Basic Switch</label>
</div>
</div>
<div class="pretty p-switch p-fill">
<input type="checkbox" />
<div class="state p-success">
<label>Fill Switch</label>
</div>
</div>
<div class="pretty p-switch p-slim">
<input type="checkbox" />
<div class="state">
<label>Slim Switch</label>
</div>
</div>
Usage as Radio
Switch can be used as a checkbox or as a radio โ just change the input type value to radio:
<div class="pretty p-switch p-slim">
<input type="radio" />
<div class="state">
<label>Switch</label>
</div>
</div>