Input
Text input component with color token variants
Input
Text input component. Apply color variant classes to match your semantic intent.
Default
Default
html
<input type="text" class="input" placeholder="Enter text" />Color Variants
Primary
html
<input type="text" class="input input-primary" placeholder="Primary" />Secondary
html
<input type="text" class="input input-secondary" placeholder="Secondary" />Tertiary
html
<input type="text" class="input input-tertiary" placeholder="Tertiary" />Info
html
<input type="text" class="input input-info" placeholder="Info" />Success
html
<input type="text" class="input input-success" placeholder="Success" />Warning
html
<input type="text" class="input input-warning" placeholder="Warning" />Error
html
<input type="text" class="input input-error" placeholder="Error" />Ghost
html
<input type="text" class="input input-ghost" placeholder="Ghost (no border)" />