Form Components

Input Fields

Text Input

Email Input

Password Input

Number Input

Date Input

Disabled Input

<div class="form-group">
    <label for="input">Label</label>
    <input type="text" id="input" class="form-input" placeholder="Placeholder">
</div>

Textarea

Description Maximum 500 characters

<div class="form-group">
    <label for="textarea">Label</label>
    <textarea id="textarea" class="form-input" rows="5"></textarea>
    <small class="form-hint">Helper text</small>
</div>

Select Dropdown

Pantheon

Domains (Multiple)

<div class="form-group">
    <label for="select">Label</label>
    <select id="select" class="form-input">
        <option value="">Select...</option>
        <option value="1">Option 1</option>
    </select>
</div>

Checkbox

Select Attributes

Immortal Shapeshifter Prophecy Disabled Option

<label class="checkbox-label">
    <input type="checkbox" class="form-checkbox">
    <span>Option Label</span>
</label>

Radio Buttons

Deity Type

Major Deity Minor Deity Hero/Demigod Mortal (Disabled)

<label class="radio-label">
    <input type="radio" name="group" class="form-radio" value="option1">
    <span>Option Label</span>
</label>

Form Validation

Valid Input This input is valid!

Error Input Please enter a valid email address

Warning Input This name is not common in Greek mythology

<div class="form-group form-error">
    <label for="input">Label</label>
    <input type="text" id="input" class="form-input">
    <small class="form-message">Error message</small>
</div>

Complete Form Example

Add New Deity

Deity Name *

Title

Pantheon *

Description *

Attributes

Immortal Shapeshifter Prophecy