Ngorei Doc
Ngorei Doc
Form Components adalah bagian penting dari antarmuka pengguna yang memungkinkan interaksi dan pengumpulan data dari pengguna. Ngorei NexaUI menyediakan berbagai komponen form yang telah dirancang dengan baik untuk memudahkan pembuatan formulir yang responsif dan mudah digunakan.
Input dasar dengan berbagai tipe yang sering digunakan dalam form.
<div class="form-nexa">
<label for="normalInput">Input Normal</label>
<input type="text" class="form-nexa-control" id="Input" placeholder="Input">
</div>
<TextInput
label="Input Normal"
type="text"
placeholder="Input Normal"
/>
Ini adalah konten untuk tab ketiga.
Variasi ukuran input yang dapat disesuaikan dengan kebutuhan tampilan.
<!-- Small Input -->
<div class="form-nexa">
<label for="input_input_small">Input Small</label>
<input type="text" class="form-nexa-control-sm" id="input_input_small" placeholder="Input kecil">
</div>
<!-- Normal Input -->
<div class="form-nexa">
<label for="input_input_normal">Input Normal</label>
<input type="text" class="form-nexa-control" id="input_input_normal" placeholder="Input normal">
</div>
<!-- Large Input -->
<div class="form-nexa">
<label for="input_input_large">Input Large</label>
<input type="text" class="form-nexa-control-lg" id="input_input_large" placeholder="Input besar">
</div>
<TextInput
label="Input Small"
type="text"
size="sm"
placeholder="Input kecil"
/>
<TextInput
label="Input Normal"
type="text"
placeholder="Input normal"
/>
<TextInput
label="Input Large"
type="text"
size="lg"
placeholder="Input besar"
/>
Berbagai state input untuk menunjukkan validasi dan status input.
<!-- Valid Input -->
<div class="form-nexa">
<label for="input_input_valid">Input Valid</label>
<input type="text" class="form-nexa-control is-valid" id="input_input_valid" placeholder="Input valid">
</div>
<!-- Invalid Input -->
<div class="form-nexa">
<label for="input_input_invalid">Input Invalid</label>
<input type="text" class="form-nexa-control is-invalid" id="input_input_invalid" placeholder="Input tidak valid">
</div>
<!-- Readonly Input -->
<div class="form-nexa">
<label for="input_input_readonly">Input Readonly</label>
<input type="text" class="form-nexa-control" id="input_input_readonly" readonly value="Tidak bisa diedit">
</div>
<TextInput
label="Input Valid"
type="text"
state="valid"
placeholder="Input valid"
/>
<TextInput
label="Input Invalid"
type="text"
state="invalid"
placeholder="Input tidak valid"
/>
<TextInput
label="Input Readonly"
type="text"
readonly="true"
value="Tidak bisa diedit"
/>
Input dengan ikon untuk memberikan indikasi visual tentang jenis input.
<!-- Username Input -->
<div class="form-nexa">
<label for="input_username">Username</label>
<div class="form-nexa-icon">
<i class="fas fa-user"></i>
<input type="text" class="form-nexa-control" id="input_username" placeholder="Masukkan username">
</div>
</div>
<!-- Password Input with Toggle -->
<div class="form-nexa">
<label for="input_password">Password</label>
<div class="form-nexa-icon">
<i class="fas fa-lock"></i>
<input type="password" class="form-nexa-control" id="input_password" placeholder="Masukkan password">
<i class="fas fa-eye-slash" data-action="password-toggle"></i>
</div>
</div>
<TextInput
label="Username"
type="text"
iconLeft="user"
placeholder="Masukkan username"
/>
<TextInput
label="Password"
type="password"
iconLeft="lock"
iconRight="eye-slash"
iconAction="password-toggle"
placeholder="Masukkan password"
/>
Kombinasi input dengan elemen tambahan seperti text, icon, atau button.
<!-- Basic Input Group -->
<div class="form-nexa">
<label>Input Group Basic</label>
<div class="form-nexa-input-group">
<span class="form-nexa-input-group-text">Rp</span>
<input type="text" class="form-nexa-control" placeholder="Nominal">
<span class="form-nexa-input-group-text">Kirim</span>
</div>
</div>
<!-- Input Group with Icons -->
<div class="form-nexa">
<label>Input Group Responsive icon</label>
<div class="form-nexa-input-group-icon form-nexa-input-group-stack">
<span class="form-nexa-input-group-text">
<i class="fas fa-money-bill-wave"></i>
Rp
</span>
<input type="text" class="form-nexa-control form-nexa-control-responsive" placeholder="Nominal">
<span class="form-nexa-input-group-text">
<i class="fas fa-paper-plane"></i>
Kirim
</span>
</div>
</div>
<TextInput
label="Input Group Basic"
type="text"
prefix="Rp"
suffix="Kirim"
placeholder="Nominal"
/>
<TextInput
label="Input Group Responsive icon"
type="text"
prefix="Rp"
prefixIcon="fa-money-bill-wave"
suffix="Kirim"
suffixIcon="paper-plane"
stack="true"
className="form-nexa-control-responsive"
placeholder="Nominal"
/>
Label yang mengambang saat input difokuskan atau diisi.
<!-- Basic Floating Label -->
<div class="form-nexa-floating">
<input type="text" class="form-nexa-control" id="input_nama" placeholder=" ">
<label for="input_nama">Nama</label>
</div>
<!-- Floating Label with Icon -->
<div class="form-nexa-floating">
<div class="form-nexa-icon">
<i class="fas fa-user"></i>
<input type="text" class="form-nexa-control" id="input_username" placeholder=" ">
<label for="input_username">Username</label>
</div>
</div>
<TextInput
label="Nama"
type="text"
floating="true"
/>
<TextInput
label="Username"
type="text"
floating="true"
iconLeft="user"
/>
Berbagai jenis input pemilihan seperti checkbox, radio button, dan select options.
<!-- Checkbox -->
<div class="form-nexa-check">
<input type="checkbox" class="form-nexa-check-input" id="check1">
<label class="form-nexa-check-label" for="check1">Default checkbox</label>
</div>
<div class="form-nexa-check">
<input type="checkbox" class="form-nexa-check-input" id="check2" checked>
<label class="form-nexa-check-label" for="check2">Checked checkbox</label>
</div>
<!-- Radio Buttons -->
<div class="form-nexa-radio">
<input type="radio" class="form-nexa-radio-input" name="radioGroup" id="radio1">
<label class="form-nexa-radio-label" for="radio1">Default radio</label>
</div>
<div class="form-nexa-radio">
<input type="radio" class="form-nexa-radio-input" name="radioGroup" id="radio2" checked>
<label class="form-nexa-radio-label" for="radio2">Selected radio</label>
</div>
<!-- Checkbox -->
<div id="checkbox" class="form-nexa">
<h5>Checkbox</h5>
<Selection
type="checkbox"
label="Default checkbox"
id="check1"
/>
<Selection
type="checkbox"
label="Checked checkbox"
checked="true"
id="check2"
/>
</div>
<!-- Radio Buttons -->
<div id="radio" class="form-nexa">
<h5>Radio Buttons</h5>
<Selection
type="radio"
name="radioGroup"
label="Default radio"
id="radio1"
/>
<Selection
type="radio"
name="radioGroup"
label="Selected radio"
checked="true"
id="radio2"
/>
</div>
<!-- Checkbox -->
<div class="form-nexa-check">
<input type="checkbox" class="form-nexa-check-input" id="check1">
<label class="form-nexa-check-label" for="check1">Default checkbox</label>
</div>
<div class="form-nexa-check">
<input type="checkbox" class="form-nexa-check-input" id="check2" checked>
<label class="form-nexa-check-label" for="check2">Checked checkbox</label>
</div>
<!-- Checkbox -->
<div id="checkbox" class="form-nexa">
<h5>Checkbox</h5>
<Selection
type="checkbox"
label="Default checkbox"
id="check1"
/>
<Selection
type="checkbox"
label="Checked checkbox"
checked="true"
id="check2"
/>
</div>
<select>
<Option value="">Pilih jenis kelamin...</Option>
<Option value="male">Male</Option>
<Option value="female">Female</Option>
<Option value="other">Other</Option>
</select>
<Selectoption
name="gender"
id="gender-field"
class="form-nexa-control"
options="male:Male,female:Female,other:Other"
placeholder="Pilih jenis kelamin..."
required
/>
<!-- Radio Buttons -->
<div class="form-nexa-radio">
<input type="radio" class="form-nexa-radio-input" name="radioGroup" id="radio1">
<label class="form-nexa-radio-label" for="radio1">Default radio</label>
</div>
<div class="form-nexa-radio">
<input type="radio" class="form-nexa-radio-input" name="radioGroup" id="radio2" checked>
<label class="form-nexa-radio-label" for="radio2">Selected radio</label>
</div>
<!-- Radio Buttons -->
<div id="radio" class="form-nexa">
<h5>Radio Buttons</h5>
<Selection
type="radio"
name="radioGroup"
label="Default radio"
id="radio1"
/>
<Selection
type="radio"
name="radioGroup"
label="Selected radio"
checked="true"
id="radio2"
/>
</div>
Input untuk mengunggah file dengan dukungan drag & drop dan preview.
<!-- Basic File Input HTML -->
<div class="form-nexa">
<label for="basicFile">Basic File Input</label>
<div class="form-nexa-file">
<input type="file" class="form-nexa-file-input" id="basicFile">
<label class="form-nexa-file-label" for="basicFile">
<i class="fas fa-cloud-upload-alt"></i>
<span class="form-nexa-file-text">Choose file</span>
<span class="form-nexa-file-button">Browse</span>
</label>
</div>
<div class="form-nexa-file-list"></div>
</div>
<!-- Multiple Files Input HTML -->
<div class="form-nexa">
<label for="file_multiple_files">Multiple Files</label>
<div class="form-nexa-file">
<input type="file" class="form-nexa-file-input" id="file_multiple_files"
multiple accept="image/*" data-max-files="3" data-max-size="2MB">
<label class="form-nexa-file-label" for="file_multiple_files">
<i class="fas fa-cloud-upload-alt"></i>
<span class="form-nexa-file-text">Choose files</span>
<span class="form-nexa-file-button">Browse</span>
</label>
</div>
<div class="form-nexa-file-list"></div>
</div>
<!-- Drag & Drop Files Input HTML -->
<div class="form-nexa">
<label for="file_drag_drop_files">Drag & Drop Files</label>
<div class="form-nexa-file form-nexa-file-dragdrop">
<input type="file" class="form-nexa-file-input" id="file_drag_drop_files"
multiple accept="image/*,application/pdf">
<label class="form-nexa-file-label" for="file_drag_drop_files">
<i class="fas fa-cloud-upload-alt"></i>
<span class="form-nexa-file-text">Drag & drop files here or</span>
<span class="form-nexa-file-button">Browse</span>
</label>
</div>
<div class="form-nexa-file-preview"></div>
<div class="form-nexa-file-list"></div>
</div>
<!-- Basic File Input -->
<FileInput
label="Basic File Input"
id="basicFile"
/>
<!-- File Input with Multiple Files -->
<FileInput
label="Multiple Files"
multiple="true"
accept="image/*"
maxFiles="3"
maxSize="2MB"
/>
<!-- File Input with Drag & Drop -->
<FileInput
label="Drag & Drop Files"
dragDrop="true"
multiple="true"
preview="true"
accept="image/*,application/pdf"
/>
Input slider dengan preview nilai yang interaktif.
<!-- Basic Range -->
<RangeInput
label="Basic Range"
value="50"
showValue="true"
/>
<!-- Range with Steps -->
<RangeInput
label="Range with Steps"
min="0"
max="100"
step="10"
value="30"
showValue="true"
/>
<!-- Range with Tooltip -->
<RangeInput
label="Range with Tooltip"
min="0"
max="200"
value="150"
tooltip="true"
variant="primary"
/>
<!-- Double Range -->
<RangeInput
label="Price Range"
double="true"
min="0"
max="1000"
minValue="200"
maxValue="800"
prefix="$"
/>
<!-- Basic Range HTML -->
<div class="form-nexa">
<label for="range_basic_range">Basic Range</label>
<input type="range" class="form-nexa-range" id="range_basic_range"
min="0" max="100" value="50">
<span class="form-nexa-range-value">50</span>
</div>
<!-- Range with Tooltip HTML -->
<div class="form-nexa">
<label for="range_tooltip">Range with Tooltip</label>
<div class="form-nexa-range-wrapper">
<input type="range" class="form-nexa-range primary" id="range_tooltip"
min="0" max="200" value="150">
<div class="form-nexa-range-tooltip">150</div>
</div>
</div>
<!-- Double Range HTML -->
<div class="form-nexa">
<label>Price Range</label>
<div class="form-nexa-range-double">
<input type="range" class="form-nexa-range" id="minRange"
min="0" max="1000" value="200">
<input type="range" class="form-nexa-range" id="maxRange"
min="0" max="1000" value="800">
<div class="form-nexa-range-values">
<span>$200</span>
<span>$800</span>
</div>
</div>
</div>
Input untuk teks panjang dengan dukungan multi-line.
. . .
<div class="form-nexa">
<label for="textArea">Textarea</label>
<textarea class="form-nexa-control" id="textArea" rows="3" placeholder="Masukkan teks panjang"></textarea>
</div>
Layout form responsif menggunakan sistem grid.
<!-- Two Column Grid HTML -->
<div class="nx-row">
<div class="nx-col-6">
<div class="form-nexa">
<label for="input_first_name">First Name</label>
<div class="form-nexa-icon">
<i class="fas fa-user"></i>
<input type="text" class="form-nexa-control"
id="input_first_name" placeholder="First Name">
</div>
</div>
</div>
<div class="nx-col-6">
<div class="form-nexa">
<label for="input_last_name">Last Name</label>
<div class="form-nexa-icon">
<i class="fas fa-user"></i>
<input type="text" class="form-nexa-control"
id="input_last_name" placeholder="Last Name">
</div>
</div>
</div>
</div>
<!-- Custom Column Sizes HTML -->
<div class="nx-row">
<div class="nx-col-8">
<div class="form-nexa">
<label for="input_email">Email</label>
<div class="form-nexa-icon">
<i class="fas fa-envelope"></i>
<input type="email" class="form-nexa-control"
id="input_email" placeholder="Enter your email">
</div>
</div>
</div>
<div class="nx-col-4">
<div class="form-nexa">
<label for="input_phone">Phone</label>
<div class="form-nexa-icon">
<i class="fas fa-phone"></i>
<input type="tel" class="form-nexa-control"
id="input_phone" placeholder="Phone number">
</div>
</div>
</div>
</div>
<!-- Two Column Grid -->
<GridForm>
<GridColumn>
<TextInput
label="First Name"
iconLeft="user"
placeholder="First Name"
/>
</GridColumn>
<GridColumn>
<TextInput
label="Last Name"
iconLeft="user"
placeholder="Last Name"
/>
</GridColumn>
</GridForm>
<!-- Custom Column Sizes -->
<GridForm>
<GridColumn size="8">
<TextInput
label="Email"
type="email"
iconLeft="envelope"
placeholder="Enter your email"
/>
</GridColumn>
<GridColumn size="4">
<TextInput
label="Phone"
type="tel"
iconLeft="phone"
placeholder="Phone number"
/>
</GridColumn>
</GridForm>
Toggle switch untuk input boolean dengan animasi smooth.
<!-- Basic Switch HTML -->
<div class="form-nexa">
<div class="form-nexa-switch-container">
<label class="form-nexa-switch">
<input type="checkbox" class="form-nexa-switch-input"
id="switch_basic_switch">
<span class="form-nexa-switch-slider"></span>
</label>
<span class="form-nexa-switch-label">Basic Switch</span>
</div>
</div>
<!-- Variant Switch HTML -->
<div class="form-nexa">
<div class="form-nexa-switch-container">
<label class="form-nexa-switch form-nexa-switch-primary">
<input type="checkbox" class="form-nexa-switch-input"
id="switch_primary_switch" checked>
<span class="form-nexa-switch-slider"></span>
</label>
<span class="form-nexa-switch-label">Primary Switch</span>
</div>
</div>
<!-- Basic Switch -->
<SwitchInput
label="Basic Switch"
/>
<!-- Checked Switch -->
<SwitchInput
label="Checked Switch"
checked="true"
/>
<!-- Switch Sizes -->
<SwitchInput
label="Small Switch"
size="sm"
/>
<SwitchInput
label="Large Switch"
size="lg"
/>
<!-- Switch Variants -->
<SwitchInput
label="Primary Switch"
variant="primary"
checked="true"
/>
<SwitchInput
label="Success Switch"
variant="success"
checked="true"
/>
Berbagai jenis input untuk pemilihan tanggal, waktu, bulan, dan minggu.
<DatePicker
label="Basic Date"
type="date"
placeholder="Select date"
/>
<DatePicker
label="Date Time"
type="datetime-local"
placeholder="Select date and time"
/>
<DatePicker
label="Month Picker"
type="month"
placeholder="Select month"
/>
<div class="form-nexa-date-range">
<DatePicker
label="Start Date"
type="date"
placeholder="Start date"
/>
<DatePicker
label="End Date"
type="date"
placeholder="End date"
/>
</div>
<!-- Basic Date Picker HTML -->
<div class="form-nexa">
<label for="date_basic_date">Basic Date</label>
<div class="form-nexa-date">
<div class="form-nexa-icon">
<i class="fas fa-calendar"></i>
<input type="date" class="form-nexa-control"
id="date_basic_date" placeholder="Select date">
</div>
</div>
</div>
<!-- Date Time Picker HTML -->
<div class="form-nexa">
<label for="date_date_time">Date Time</label>
<div class="form-nexa-date">
<div class="form-nexa-icon">
<i class="fas fa-calendar-alt"></i>
<input type="datetime-local" class="form-nexa-control"
id="date_date_time" placeholder="Select date and time">
</div>
</div>
</div>
Editor teks WYSIWYG dengan berbagai fitur formatting.
This is a basic text editor implementation with full features.
Simple editor with minimal toolbar options.
<!-- Basic Editor HTML -->
<div class="form-nexa">
<label for="editor_basic_editor">Basic Editor</label>
<div class="form-nexa-editor">
<div id="editor_basic_editor" class="form-nexa-editor-control"
style="min-height: 200px;">
<h2>Welcome to NexaUI Editor</h2>
<p>This is a basic text editor implementation with full features.</p>
</div>
</div>
<script>
new Quill('#editor_basic_editor', {
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['link', 'image'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['clean']
]
}
});
</script>
</div>
<!-- Basic Editor -->
<TextEditor
label="Basic Editor"
type="basic"
height="200px"
>
<h2>Welcome to NexaUI Editor</h2>
<p>This is a basic text editor implementation with full features.</p>
</TextEditor>
<!-- Minimal Editor -->
<TextEditor
label="Minimal Editor"
type="minimal"
height="150px"
placeholder="Start typing..."
>
<p>Simple editor with minimal toolbar options.</p>
</TextEditor>
Form bertahap dengan progress indicator dan validasi di setiap langkah.
<div class="form-nexa-wizard">
<div class="form-nexa-wizard-progress">
<div class="form-nexa-wizard-progress-step active" data-step="1">
<span class="step-number">1</span>
<span class="step-text">Personal Info</span>
</div>
<div class="form-nexa-wizard-progress-step" data-step="2">
<span class="step-number">2</span>
<span class="step-text">Contact</span>
</div>
</div>
<div class="form-nexa-wizard-content">
<div class="form-nexa-wizard-step active" data-step="1">
<div class="form-nexa">
<label for="fullName">Full Name</label>
<input type="text" class="form-nexa-control"
id="fullName" placeholder="Enter your full name" required>
</div>
</div>
</div>
<div class="form-nexa-wizard-buttons">
<button type="button" class="form-nexa-btn" id="prevStep" disabled>Previous</button>
<button type="button" class="form-nexa-btn primary" id="nextStep">Next</button>
<button type="button" class="form-nexa-btn success" id="submitWizard" style="display: none;">Submit</button>
</div>
</div>
<FormWizard>
<!-- Step 1: Personal Info -->
<WizardStep title="Personal Info">
<TextInput
label="Full Name"
id="fullName"
placeholder="Enter your full name"
required="true"
/>
<DatePicker
label="Date of Birth"
id="birthDate"
type="date"
required="true"
/>
<SelectionInput
label="Gender"
id="gender"
required="true"
>
<Option value="">Select gender...</Option>
<Option value="male">Male</Option>
<Option value="female">Female</Option>
</SelectionInput>
</WizardStep>
<!-- Step 2: Contact -->
<WizardStep title="Contact">
<TextInput
label="Email"
id="email"
type="email"
iconLeft="envelope"
required="true"
/>
</WizardStep>
</FormWizard>
Input pencarian dengan fitur autocomplete dan multiple selection.
<!-- Basic Search HTML -->
<div class="form-nexa-search">
<label for="basicSearch">Basic Search</label>
<div class="form-nexa-search-container">
<input type="text" class="form-nexa-control"
id="basicSearch" placeholder="Search options...">
<div class="form-nexa-search-dropdown">
<div class="form-nexa-search-items">
<div class="form-nexa-search-item" data-value="option1">Option 1</div>
<div class="form-nexa-search-item" data-value="option2">Option 2</div>
<div class="form-nexa-search-item" data-value="option3">Option 3</div>
</div>
</div>
</div>
</div>
<!-- Search with Icon HTML -->
<div class="form-nexa-search">
<label for="iconSearch">Search with Icon</label>
<div class="form-nexa-search-container">
<div class="form-nexa-icon">
<i class="fas fa-search"></i>
<input type="text" class="form-nexa-control"
id="iconSearch" placeholder="Search users...">
</div>
<div class="form-nexa-search-dropdown">
<div class="form-nexa-search-items">
<div class="form-nexa-search-item" data-value="user1">
<i class="fas fa-user"></i>
<span>John Doe</span>
</div>
<div class="form-nexa-search-item" data-value="user2">
<i class="fas fa-user"></i>
<span>Jane Smith</span>
</div>
</div>
</div>
</div>
</div>
<!-- Multiple Search HTML -->
<div class="form-nexa-search">
<label for="multiSearch">Multiple Search</label>
<div class="form-nexa-search-container">
<div class="form-nexa-search-tags">
<div class="form-nexa-search-input-container">
<input type="text" class="form-nexa-search-input"
id="multiSearch" placeholder="Add tags..."
data-multiple="true">
</div>
</div>
<div class="form-nexa-search-dropdown">
<div class="form-nexa-search-items">
<div class="form-nexa-search-item" data-value="tag1">JavaScript</div>
<div class="form-nexa-search-item" data-value="tag2">Python</div>
<div class="form-nexa-search-item" data-value="tag3">Java</div>
</div>
</div>
</div>
</div>
<!-- Basic Search -->
<SearchOption
label="Basic Search"
id="basicSearch"
placeholder="Search options..."
>
<Option value="option1">Option 1</Option>
<Option value="option2">Option 2</Option>
<Option value="option3">Option 3</Option>
</SearchOption>
<!-- Search with Icon -->
<SearchOption
label="Search with Icon"
id="iconSearch"
placeholder="Search users..."
icon="search"
>
<Option value="user1" icon="user">John Doe</Option>
<Option value="user2" icon="user">Jane Smith</Option>
<Option value="user3" icon="user">Bob Johnson</Option>
</SearchOption>
<!-- Multiple Search -->
<SearchOption
label="Multiple Search"
id="multiSearch"
type="multiple"
placeholder="Add tags..."
>
<Option value="tag1">JavaScript</Option>
<Option value="tag2">Python</Option>
<Option value="tag3">Java</Option>
</SearchOption>