Roxo - Premium Admin Template

- Notifications
  Check all
- Gary Hogan5 mins ago
  
  I have add 2 files for new task
  
  1_day_task.pdf1 MB
  
  day_task.pdf4 MB
- Edwin Day30 mins ago
  
  Marked the bug analysis task as done
- Ralph Waters45 mins ago
  
  New bugs added for designer
- Bookmark
- - Email
  - Feather icon
  - Chat
- Cart
  Check all
- Mi Watch Revolve
  
  $ 10.00
- Ulrich Duffel Bag
  
  $140.00
- Tree Stylish Pot
  
  $ 840.00
- Total
  
  $ 990.00
- Proceed to checkout
- Messages
  Send a new message
- Robert fox
  
  Lorem Ipsum is simply dummy give information
  10 mins ago
  online
- Andrew Young
  
  Lorem Ipsum is simply dummy give information
  25 mins ago
  warning
- Lucia Slaughter
  
  Lorem Ipsum is simply dummy give information
  1 hr ago
  online
Helen Walter
Admin
- Inbox
- Taskboard
- Log out

Select

ADMIN PANEL

Select Default

You can use select as code show bellow

 <select class="w-full max-w-xs bg-white border-none select">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select With Border

You can use select with border by adding .select-bordered

Preview Html

 <select class="w-full max-w-xs bg-white dark:bg-dark-dense select select-bordered">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option>  
  <option>Maggie</option>
</select>

Select Primary

You can use select primary by adding .select-primary classes

Preview Html

 <select class="w-full max-w-xs bg-white border dark:bg-dark-dense select border-primary">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select secondary

You can use select secondary by adding .select-secondary classes

Preview Html

 <select class="w-full max-w-xs bg-white border dark:bg-dark-dense select border-secondary">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select success

You can use select success by adding .select-success classes

Preview Html

 <select class="w-full max-w-xs bg-white border dark:bg-dark-dense select border-success">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select warning

You can use select warning by adding .select-warning classes

Preview Html

 <select class="w-full max-w-xs bg-white border dark:bg-dark-dense select border-warning">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select info

You can use select info by adding .select-info classes

Preview Html

  <select class="w-full max-w-xs bg-white border dark:bg-dark-dense select border-info">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

With Form-control and Labels

You can use select with form-control and labels as code show bellow

Preview Html

Pick the best fantasy franchiseAlt label Alt labelAlt label

  <div class="w-full max-w-xs form-control">
  <label class="flex justify-between px-1 py-2 label">
     <span class="label-text">Pick the best fantasy franchise</span>
     <span class="label-text-alt">Alt label</span>
  </label>
  <select class="bg-white dark:bg-dark-dense select select-bordered">
     <option disabled selected>Pick one</option>
     <option>Star Wars</option>
     <option>Harry Potter</option>
     <option>Lord of the Rings</option>
     <option>Planet of the Apes</option>
     <option>Star Trek</option>
  </select>
  <label class="flex justify-between px-1 py-2 label">
     <span class="label-text-alt">Alt label</span>
     <span class="label-text-alt">Alt label</span>
  </label>
</div>

Select With Different Size

You can use different size select by adding .select-(lg, md, sm, xs) classes

Preview Html

  <!-- lg -->
<select class="w-full max-w-xs bg-white dark:bg-dark-dense select select-bordered select-lg">
  <option disabled selected>Large</option>
  <option>Large Apple</option>
  <option>Large Orange</option>
  <option>Large Tomato</option>
</select>

<!-- md -->
<select class="w-full max-w-xs bg-white dark:bg-dark-dense select select-bordered">
 <option disabled selected>Normal</option>
 <option>Normal Apple</option>
 <option>Normal Orange</option>
 <option>Normal Tomato</option>
</select> 
 
<!-- sm -->
<select class="w-full max-w-xs bg-white dark:bg-dark-dense select select-bordered select-sm">
 <option disabled selected>Small</option>
 <option>Small Apple</option>
 <option>Small Orange</option>
 <option>Small Tomato</option>
</select>

<!-- xs --> 
<select class="w-full max-w-xs bg-white dark:bg-dark-dense select select-bordered select-xs">
 <option disabled selected>Tiny</option>
 <option>Tiny Apple</option>
 <option>Tiny Orange</option>
 <option>Tiny Tomato</option>
</select>

Select

Select Default

Select With Border

Select Primary

Select secondary

Select success

Select warning

Select info

With Form-control and Labels

Select With Different Size

Template Mode

Layout Type

Sidebar Type