UI.BlueStack.io - Component Library

forms Component

Text Inputs

Basic Text Inputs

Default Input

Required Field We'll never share your email with anyone.

Disabled Input

Input with Error This field is required

<div class="space-y-4 max-w-md">
                    <div class="form-group">
                        <label class="form-label">Default Input</label>
                        <input type="text" class="form-input" placeholder="Enter text...">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Required Field</label>
                        <input type="email" class="form-input" placeholder="email@example.com" required>
                        <span class="form-hint">We'll never share your email with anyone.</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Disabled Input</label>
                        <input type="text" class="form-input" placeholder="Cannot edit" disabled>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Input with Error</label>
                        <input type="text" class="form-input form-input-error" placeholder="Invalid input">
                        <span class="form-error">This field is required</span>
                    </div>
                </div>

<div class="space-y-4 max-w-md">
                    <div class="form-group">
                        <label class="form-label">Default Input</label>
                        <input type="text" class="form-input" placeholder="Enter text...">
                    </div>

<div class="form-group">
                        <label class="form-label">Required Field</label>
                        <input type="email" class="form-input" placeholder="email@example.com" required>
                        <span class="form-hint">We'll never share your email with anyone.</span>
                    </div>

<div class="form-group">
                        <label class="form-label">Disabled Input</label>
                        <input type="text" class="form-input" placeholder="Cannot edit" disabled>
                    </div>

<div class="form-group">
                        <label class="form-label">Input with Error</label>
                        <input type="text" class="form-input form-input-error" placeholder="Invalid input">
                        <span class="form-error">This field is required</span>
                    </div>
                </div>

Select Dropdown

Basic Select Dropdown

Choose an option

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Choose an option</label>
                        <select class="form-select">
                            <option>Select...</option>
                            <option>Option 1</option>
                            <option>Option 2</option>
                            <option>Option 3</option>
                        </select>
                    </div>
                </div>

Textarea

Basic Textarea

Message

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Message</label>
                        <textarea class="form-textarea" rows="4" placeholder="Enter your message..."></textarea>
                    </div>
                </div>

Simple Textarea with Formatting

Location Notes (Simple) Markdown format: **bold**, _italic_

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Location Notes (Simple)</label>
                        <div class="textarea-with-toolbar">
                            <div class="textarea-toolbar">
                                <button type="button" class="toolbar-btn tiny" 
                                        on="click insertTextFormat('#location-notes-simple', '**', '**')"
                                        title="Bold">
                                    <i class="icon bold w-3 h-3"></i>
                                </button>
                                <button type="button" class="toolbar-btn tiny" 
                                        on="click insertTextFormat('#location-notes-simple', '_', '_')"
                                        title="Italic">
                                    <i class="icon italic w-3 h-3"></i>
                                </button>
                                <button type="button" class="toolbar-btn tiny" 
                                        on="click insertTextFormat('#location-notes-simple', '<u>', '</u>')"
                                        title="Underline">
                                    <i class="icon underline w-3 h-3"></i>
                                </button>
                            </div>
                            <textarea id="location-notes-simple" 
                                      class="form-textarea" 
                                      rows="5" 
                                      placeholder="Enter location notes... (Use toolbar for formatting)"></textarea>
                        </div>
                        <span class="form-hint">Markdown format: **bold**, _italic_</span>
                    </div>
                </div>

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Location Notes (Simple)</label>
                        <div class="textarea-with-toolbar">
                            <div class="textarea-toolbar">
                                <button type="button" class="toolbar-btn tiny" 
                                        on="click insertTextFormat('#location-notes-simple', '**', '**')"
                                        title="Bold">
                                    <i class="icon bold w-3 h-3"></i>
                                </button>
                                <button type="button" class="toolbar-btn tiny" 
                                        on="click insertTextFormat('#location-notes-simple', '_', '_')"
                                        title="Italic">
                                    <i class="icon italic w-3 h-3"></i>
                                </button>
                                <button type="button" class="toolbar-btn tiny" 
                                        on="click insertTextFormat('#location-notes-simple', '<u>', '</u>')"
                                        title="Underline">
                                    <i class="icon underline w-3 h-3"></i>
                                </button>
                            </div>
                            <textarea id="location-notes-simple" 
                                      class="form-textarea" 
                                      rows="5" 
                                      placeholder="Enter location notes... (Use toolbar for formatting)"></textarea>
                        </div>
                        <span class="form-hint">Markdown format: **bold**, _italic_</span>
                    </div>
                </div>

Rich Text Editor - Location Notes

Location Notes

Use the toolbar to format your notes

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Location Notes</label>
                        <div class="rich-text-editor">
                            <div class="editor-toolbar">
                                <button type="button" class="toolbar-btn" data-command="bold" title="Bold (Ctrl+B)">
                                    <i class="icon bold w-4 h-4"></i>
                                </button>
                                <button type="button" class="toolbar-btn" data-command="italic" title="Italic (Ctrl+I)">
                                    <i class="icon italic w-4 h-4"></i>
                                </button>
                                <button type="button" class="toolbar-btn" data-command="underline" title="Underline (Ctrl+U)">
                                    <i class="icon underline w-4 h-4"></i>
                                </button>
                                <span class="toolbar-divider"></span>
                                <button type="button" class="toolbar-btn" data-command="list-bullet" title="Bullet List">
                                    <i class="icon list w-4 h-4"></i>
                                </button>
                                <button type="button" class="toolbar-btn" data-command="list-number" title="Numbered List">
                                    <i class="icon list-ordered w-4 h-4"></i>
                                </button>
                            </div>
                            <div class="editor-content" contenteditable="true" data-placeholder="Enter location notes..."></div>
                        </div>
                        <span class="form-hint">Use the toolbar to format your notes</span>
                    </div>
                </div>

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Location Notes</label>
                        <div class="rich-text-editor">
                            <div class="editor-toolbar">
                                <button type="button" class="toolbar-btn" data-command="bold" title="Bold (Ctrl+B)">
                                    <i class="icon bold w-4 h-4"></i>
                                </button>
                                <button type="button" class="toolbar-btn" data-command="italic" title="Italic (Ctrl+I)">
                                    <i class="icon italic w-4 h-4"></i>
                                </button>
                                <button type="button" class="toolbar-btn" data-command="underline" title="Underline (Ctrl+U)">
                                    <i class="icon underline w-4 h-4"></i>
                                </button>
                                <span class="toolbar-divider"></span>
                                <button type="button" class="toolbar-btn" data-command="list-bullet" title="Bullet List">
                                    <i class="icon list w-4 h-4"></i>
                                </button>
                                <button type="button" class="toolbar-btn" data-command="list-number" title="Numbered List">
                                    <i class="icon list-ordered w-4 h-4"></i>
                                </button>
                            </div>
                            <div class="editor-content" contenteditable="true" data-placeholder="Enter location notes..."></div>
                        </div>
                        <span class="form-hint">Use the toolbar to format your notes</span>
                    </div>
                </div>

Lightweight WYSIWYG Editor

Location Notes (WYSIWYG) Lightweight WYSIWYG with keyboard shortcuts

<div class="max-w-md">
                    <div class="form-group">
                        <label class="form-label">Location Notes (WYSIWYG)</label>
                        <textarea id="wysiwyg-demo"
                                  class="form-textarea"
                                  rows="5"
                                  data-wysiwyg='{"placeholder":"Enter your location notes...","maxHeight":"7.5rem"}'></textarea>
                        <span class="form-hint">Lightweight WYSIWYG with keyboard shortcuts</span>
                    </div>
                </div>

Checkboxes

Basic Checkboxes

Remember me Subscribe to newsletter Disabled option

<div class="space-y-3">
                    <label class="form-checkbox">
                        <input type="checkbox" class="form-checkbox-input">
                        <span class="form-checkbox-label">Remember me</span>
                    </label>

                    <label class="form-checkbox">
                        <input type="checkbox" class="form-checkbox-input" checked>
                        <span class="form-checkbox-label">Subscribe to newsletter</span>
                    </label>

                    <label class="form-checkbox">
                        <input type="checkbox" class="form-checkbox-input" disabled>
                        <span class="form-checkbox-label">Disabled option</span>
                    </label>
                </div>

Radio Buttons

Basic Radio Buttons

Free Plan Pro Plan Enterprise Plan

<div class="space-y-3">
                    <label class="form-radio">
                        <input type="radio" name="plan" class="form-radio-input">
                        <span class="form-radio-label">Free Plan</span>
                    </label>

                    <label class="form-radio">
                        <input type="radio" name="plan" class="form-radio-input" checked>
                        <span class="form-radio-label">Pro Plan</span>
                    </label>

                    <label class="form-radio">
                        <input type="radio" name="plan" class="form-radio-input">
                        <span class="form-radio-label">Enterprise Plan</span>
                    </label>
                </div>

Complete Form

Contact Form Example

Contact Form

First Name

Last Name

Subject

Message

Send me a copy

<form class="card max-w-lg">
                    <div class="card-header">
                        <h3 class="card-title">Contact Form</h3>
                    </div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="form-group">
                                <label class="form-label">First Name</label>
                                <input type="text" class="form-input" placeholder="John">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Last Name</label>
                                <input type="text" class="form-input" placeholder="Doe">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-input" placeholder="john@example.com">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Subject</label>
                            <select class="form-select">
                                <option>General Inquiry</option>
                                <option>Support</option>
                                <option>Feedback</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Message</label>
                            <textarea class="form-textarea" rows="4"></textarea>
                        </div>

                        <label class="form-checkbox">
                            <input type="checkbox" class="form-checkbox-input">
                            <span class="form-checkbox-label">Send me a copy</span>
                        </label>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="button primary">Submit</button>
                        <button type="reset" class="button ghost">Reset</button>
                    </div>
                </form>

<form class="card max-w-lg">
                    <div class="card-header">
                        <h3 class="card-title">Contact Form</h3>
                    </div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="form-group">
                                <label class="form-label">First Name</label>
                                <input type="text" class="form-input" placeholder="John">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Last Name</label>
                                <input type="text" class="form-input" placeholder="Doe">
                            </div>
                        </div>

<div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-input" placeholder="john@example.com">
                        </div>

<div class="form-group">
                            <label class="form-label">Subject</label>
                            <select class="form-select">
                                <option>General Inquiry</option>
                                <option>Support</option>
                                <option>Feedback</option>
                            </select>
                        </div>

<div class="form-group">
                            <label class="form-label">Message</label>
                            <textarea class="form-textarea" rows="4"></textarea>
                        </div>

<label class="form-checkbox">
                            <input type="checkbox" class="form-checkbox-input">
                            <span class="form-checkbox-label">Send me a copy</span>
                        </label>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="button primary">Submit</button>
                        <button type="reset" class="button ghost">Reset</button>
                    </div>
                </form>