
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/input/index.mdx'

## Default Class Table
  
<CssTable name="input" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.input {
  @apply flex-shrink h-12 px-4 text-sm leading-loose;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.input {
  @apply border-base-content bg-base-100 rounded-btn border border-opacity-0 text-base;
}
.input input:focus {
  @apply outline-none;
}
.input[list]::-webkit-calendar-picker-indicator {
  line-height: 1em;
}
.input-bordered {
  @apply border-opacity-20;
}
.input:focus,
.input:focus-within {
  @apply outline-0 shadow-[0_0_0_2px] shadow-base-content/10;
}
.input-ghost {
  @apply bg-opacity-5;
}
.input-ghost:focus,
.input-ghost:focus-within {
  @apply text-base-content bg-opacity-100;
  box-shadow: none;
}
.input-primary {
  @apply border-primary;
}
.input-primary:focus,
.input-primary:focus-within {
  @apply shadow-primary/10;
}
.input-success {
  @apply border-success;
}
.input-success:focus,
.input-success:focus-within {
  @apply shadow-success/10;
}
.input-warning {
  @apply border-warning;
}
.input-warning:focus,
.input-warning:focus-within {
  @apply shadow-warning/10;
}
.input-error {
  @apply border-error;
}
.input-error:focus,
.input-error:focus-within {
  @apply shadow-error/10;
}
.input-neutral {
  @apply border-neutral;
}
.input-neutral:focus,
.input-neutral:focus-within {
  @apply shadow-neutral/10;
}
.input-disabled,
.input:disabled,
.input[disabled] {
  @apply border-base-200 bg-base-200 placeholder-base-content cursor-not-allowed text-opacity-20 placeholder-opacity-20;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.input-xs {
  @apply h-6 px-2 text-xs leading-relaxed;
}
.input-sm {
  @apply h-8 px-3 text-sm leading-8;
}
.input-md {
  @apply h-12 px-4 text-sm leading-loose;
}
.input-lg {
  @apply h-16 px-6 text-lg leading-loose;
}

```

</div>
</div>



