v1.2.1

Form

Class name	Type	Description
`tc-form-group`	Component	Input group wrapper
`tc-form-group-text`	Component	Input group text
`tc-form-label`	Component	Form `label` element
`tc-form-input`	Component	Any non-specific `input` element
`tc-form-file`	Component	Form `file` input
`tc-form-textarea`	Component	Form `textarea` element
`tc-form-select`	Component	Form `select` element
`tc-form-checkbox`	Component	Form `checkbox` input
`tc-form-radio`	Component	Form `radio` input
`tc-form-toggle-label`	Component	Toggle component wrapper
`tc-form-toggle-text`	Component	Toggle component text
`tc-form-toggle`	Component	Toggle component
`tc-form-toggle-sm`	Component	Small toggle component
`tc-form-status-info`	Utility	Styled form element
`tc-form-status-warning`	Utility	Styled form element
`tc-form-status-error`	Utility	Styled form element
`tc-form-status-success`	Utility	Styled form element

Input types

Input (text) Input (email) Input (url) Input (password) Input (tel) Input (date) Input (time) Input (datetime-local) Input (number) Input (file) Textarea


                
                <!-- text -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-text">Input (text)</label>
<input type="text" id="input-text" name="input-text" class="tc-form-input mb-6" placeholder="Input (text)">

<!-- email -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-email">Input (email)</label>
<input type="email" id="input-email" name="input-email" class="tc-form-input mb-6" placeholder="Input (email)">

<!-- url -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-url">Input (url)</label>
<input type="url" id="input-url" name="input-url" class="tc-form-input mb-6" placeholder="Input (url)">

<!-- password -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-password">Input (password)</label>
<input type="password" id="input-password" name="input-password" class="tc-form-input mb-6" placeholder="Input (password)">

<!-- tel -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-tel">Input (tel)</label>
<input type="tel" id="input-tel" name="input-tel" class="tc-form-input mb-6" placeholder="Input (tel)">

<!-- date -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-date">Input (date)</label>
<input type="date" id="input-date" name="input-date" class="tc-form-input mb-6">

<!-- time -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-time">Input (time)</label>
<input type="time" id="input-time" name="input-time" class="tc-form-input mb-6">

<!-- datetime-local -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-datetime-local">Input (datetime-local)</label>
<input type="datetime-local" id="input-datetime-local" name="input-datetime-local" class="tc-form-input mb-6">

<!-- number -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-number">Input (number)</label>
<input type="number" id="input-number" name="input-number" class="tc-form-input mb-6" min="0" max="10">

<!-- file -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-file">Input (file)</label>
<input type="file" id="input-file" name="input-file" class="tc-form-file mb-6" accept="image/png, image/jpeg">

<!-- textarea -->

<label class="tc-form-label mb-1 text-sm font-medium" for="textarea1">Textarea</label>
<textarea id="textarea1" name="textarea1" class="tc-form-textarea" rows="6" placeholder="Leave a comment..."></textarea>

Input group

Group (left)

https://

Group (right)

.00

Group (left+right)

$ .00


                
                <!-- Group (left) -->

<label class="tc-form-label mb-1 text-sm font-medium" for="form-group-l">Group (left)</label>

<div class="tc-form-group mb-6">

    <span class="tc-form-group-text">https://</span>
    <input type="text" id="form-group-l" name="form-group-l" class="tc-form-input" placeholder="Group (left)">

</div>

<!-- Group (right) -->

<label class="tc-form-label mb-1 text-sm font-medium" for="form-group-r">Group (right)</label>

<div class="tc-form-group mb-6">

    <input type="text" id="form-group-r" name="form-group-r" class="tc-form-input" placeholder="Group (right)">
    <span class="tc-form-group-text">.00</span>

</div>

<!-- Group (left+right) -->

<label class="tc-form-label mb-1 text-sm font-medium" for="form-group-lr">Group (left+right)</label>

<div class="tc-form-group">

    <span class="tc-form-group-text">$</span>
    <input type="text" id="form-group-lr" name="form-group-lr" class="tc-form-input" placeholder="Group (left+right)">
    <span class="tc-form-group-text">.00</span>

</div>

Input variations

Input (disabled) Input (text inside left)

https://

Input (icon inside left )

Input (icon inside right)

Input (button inside right)

Input (status-info) Input (status-warning) Input (status-error) Input (status-success)


                
                <!-- disabled -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-disabled">Input (disabled)</label>
<input type="text" id="input-disabled" name="input-disabled" class="tc-form-input mb-6" placeholder="Input (disabled)" disabled>

<!-- text-inside-l -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-text-inside-l">Input (text inside left)</label>

<div class="relative mb-6">

    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none tu-text-light">https://</div>
    <input type="text" id="input-text-inside-l" name="input-text-inside-l" class="tc-form-input pl-[4.5rem]" placeholder="Input (text inside left)">

</div>

<!-- icon-inside-l -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-icon-inside-l2">Input (icon inside left )</label>

<div class="relative mb-6">

    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none tu-text-light">

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
             class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
        </svg>

    </div>

    <input type="text" id="input-icon-inside-l2" name="input-icon-inside-l" class="tc-form-input pl-10" placeholder="Input (icon inside left)">

</div>

<!-- icon-inside-r -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-icon-inside-r2">Input (icon inside right)</label>

<div class="relative mb-6">

    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none tu-text-light">

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
             class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
        </svg>

    </div>

    <input type="text" id="input-icon-inside-r2" name="input-icon-inside-l" class="tc-form-input pr-10" placeholder="Input (icon inside right)">

</div>

<!-- button-inside-r -->

<label class="tc-form-label mb-1 text-sm font-medium" for="input-button-inside-r">Input (button inside right)</label>

<div class="flex mb-6">

    <input type="text" id="input-button-inside-r" name="input-button-inside-r" class="tc-form-input rounded-r-none z-0" placeholder="Input (button inside right)">

    <div>
        <input type="submit" class="tc-btn tc-style-default focus:tu-ring-info rounded-l-none border-l-0" value="Submit">
    </div>

</div>

<!-- status-info -->

<label class="tc-form-label mb-1 text-sm font-medium tu-text-info-light" for="input-info">Input (status-info)</label>
<input type="text" id="input-info" name="input-info" class="tc-form-input tc-form-status-info mb-6" placeholder="Input (status-info)">

<!-- status-warning -->

<label class="tc-form-label mb-1 text-sm font-medium tu-text-warning-light" for="input-warning">Input (status-warning)</label>
<input type="text" id="input-warning" name="input-warning" class="tc-form-input tc-form-status-warning mb-6" placeholder="Input (status-warning)">

<!-- status-error -->

<label class="tc-form-label mb-1 text-sm font-medium tu-text-error-light" for="input-error">Input (status-error)</label>
<input type="text" id="input-error" name="input-error" class="tc-form-input tc-form-status-error mb-6" placeholder="Input (status-error)">

<!-- status-success -->

<label class="tc-form-label mb-1 text-sm font-medium tu-text-success-light" for="input-success">Input (status-success)</label>
<input type="text" id="input-success" name="input-success" class="tc-form-input tc-form-status-success" placeholder="Input (status-success)">

Select

Select Select (optgroup) Select Multiple


                
                <!-- select -->

<label class="tc-form-label mb-1 text-sm font-medium" for="select1">Select</label>
<select id="select1" name="select1" class="tc-form-select mb-6">
    <option value="">Choose one...</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!-- select-optgroup -->

<label class="tc-form-label mb-1 text-sm font-medium" for="select-optgroup">Select (optgroup)</label>
<select id="select-optgroup" name="select-optgroup" class="tc-form-select mb-6">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

<!-- select-multiple -->

<label class="tc-form-label mb-1 text-sm font-medium" for="select-multiple">Select Multiple</label>
<select id="select-multiple" name="select-multiple" class="tc-form-select" multiple>
    <option value="">Choose multiple...</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

Checkbox


                
                <p class="mb-4 font-semibold">Toggle</p>

<!-- Toggle -->
<div class="mb-6">
    <label for="toggle-example" class="tc-form-toggle-label">
        <input type="checkbox" id="toggle-example" name="toggle-example" value="true" class="peer">
        <span class="peer tc-form-toggle"></span>
        <span class="tc-form-toggle-text">Toggle default</span>
    </label>
</div>

<!-- Small toggle -->
<div class="mb-6">
    <label for="toggle-example2" class="tc-form-toggle-label">
        <input type="checkbox" id="toggle-example2" name="toggle-example" value="true" class="peer">
        <span class="peer tc-form-toggle-sm"></span>
        <span class="tc-form-toggle-text">Toggle small</span>
    </label>
</div>

<p class="mb-4 font-semibold">Vertical</p>

<!-- Vertical -->
<div class="mb-6">

    <div class="flex items-center mb-6">
        <input type="checkbox" id="checkbox-1" name="checkbox-vertical" class="tc-form-checkbox">
        <label class="tc-form-label ml-2" for="checkbox-1">Checkbox 1</label>
    </div>

    <div class="flex items-center mb-6">
        <input type="checkbox" id="checkbox-2" name="checkbox-vertical" class="tc-form-checkbox">
        <label class="tc-form-label ml-2" for="checkbox-2">Checkbox 2</label>
    </div>

    <div class="flex items-center mb-6">
        <input type="checkbox" id="checkbox-3" name="checkbox-vertical" class="tc-form-checkbox">
        <label class="tc-form-label ml-2" for="checkbox-3">Checkbox 3</label>
    </div>

</div>

<p class="mb-4 font-semibold">Horizontal</p>

<!-- Horizontal -->
<div class="flex flex-wrap items-center gap-6">

    <div class="flex items-center">
        <input type="checkbox" id="checkbox-4" name="checkbox-horizontal" class="tc-form-checkbox">
        <label class="tc-form-label ml-2" for="checkbox-4">Checkbox 4</label>
    </div>

    <div class="flex items-center">
        <input type="checkbox" id="checkbox-5" name="checkbox-horizontal" class="tc-form-checkbox">
        <label class="tc-form-label ml-2" for="checkbox-5">Checkbox 5</label>
    </div>

    <div class="flex items-center">
        <input type="checkbox" id="checkbox-6" name="checkbox-horizontal" class="tc-form-checkbox">
        <label class="tc-form-label ml-2" for="checkbox-6">Checkbox 6</label>
    </div>

</div>

Radio


                
                <p class="mb-4 font-semibold">Vertical</p>

<!-- Vertical -->
<div class="mb-6">

    <div class="flex items-center mb-6">
        <input type="radio" id="radio-1" name="radio-vertical" class="tc-form-radio" value="input-radio-1">
        <label class="tc-form-label ml-2" for="radio-1">Radio 1</label>
    </div>

    <div class="flex items-center mb-6">
        <input type="radio" id="radio-2" name="radio-vertical" class="tc-form-radio" value="input-radio-2">
        <label class="tc-form-label ml-2" for="radio-2">Radio 1</label>
    </div>

    <div class="flex items-center mb-6">
        <input type="radio" id="radio-3" name="radio-vertical" class="tc-form-radio" value="input-radio-3">
        <label class="tc-form-label ml-2" for="radio-3">Radio 1</label>
    </div>

</div>

<p class="mb-4 font-semibold">Horizontal</p>

<!-- Horizontal -->
<div class="mb-6">

    <div class="flex flex-wrap items-center gap-6">

        <div class="flex items-center">
            <input type="radio" id="radio-4" name="radio-horizontal" class="tc-form-radio" value="input-radio-4">
            <label class="tc-form-label ml-2" for="radio-4">Radio 4</label>
        </div>

        <div class="flex items-center">
            <input type="radio" id="radio-5" name="radio-horizontal" class="tc-form-radio" value="input-radio-5">
            <label class="tc-form-label ml-2" for="radio-5">Radio 5</label>
        </div>

        <div class="flex items-center">
            <input type="radio" id="radio-6" name="radio-horizontal" class="tc-form-radio" value="input-radio-6">
            <label class="tc-form-label ml-2" for="radio-6">Radio 6</label>
        </div>

    </div>

</div>