Form inputs

  1. Forms
  2. Form Elements
  3. Inputs

Identity and contact

Basic information for your account profile.

Used for account updates and notifications.
A short summary helps teammates know what you work on. 
<form>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="profile-name" class="form-label">Full name</label>
                                            <input type="text" class="form-control" id="profile-name" value="Amelia Hart" autocomplete="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="profile-role" class="form-label">Job title</label>
                                            <input type="text" class="form-control" id="profile-role" value="Product Admin" autocomplete="organization-title">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="profile-email" class="form-label">Work email</label>
                                            <input type="email" class="form-control" id="profile-email" value="amelia.hart@example.com" autocomplete="email">
                                            <div class="form-text">Used for account updates and notifications.</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="profile-phone" class="form-label">Phone number</label>
                                            <input type="tel" class="form-control" id="profile-phone" value="+1 415 555 0148" autocomplete="tel">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="profile-website" class="form-label">Portfolio URL</label>
                                            <input type="url" class="form-control" id="profile-website" placeholder="https://your-site.com">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="profile-location" class="form-label">Office location</label>
                                            <input class="form-control" list="office-locations" id="profile-location" placeholder="Choose an office">
                                            <datalist id="office-locations">
                                                <option value="San Francisco"></option>
                                                <option value="New York"></option>
                                                <option value="London"></option>
                                                <option value="Singapore"></option>
                                            </datalist>
                                        </div>
                                        <div class="col-12">
                                            <label for="profile-bio" class="form-label">Short introduction</label>
                                            <textarea class="form-control" id="profile-bio" rows="3" placeholder="Share a little about your role and focus"></textarea>
                                            <div class="form-text">A short summary helps teammates know what you work on.</div>
                                        </div>
                                    </div>
                                </form>

Profile appearance

Choose how your profile is presented.

PNG or JPG, up to 5 MB.
Used for your workspace profile badge. 
<div class="mb-4">
                                    <label for="profile-photo" class="form-label">Profile photo</label>
                                    <input class="form-control" type="file" id="profile-photo" accept="image/*">
                                    <div class="form-text">PNG or JPG, up to 5 MB.</div>
                                </div>
                                <div class="mb-4">
                                    <label for="profile-color" class="form-label">Profile accent</label>
                                    <div class="d-flex align-items-center gap-3">
                                        <input class="form-control form-input-color" type="color" id="profile-color" value="#6759d1" title="Choose profile accent">
                                        <span class="text-muted fs-13">Used for your workspace profile badge.</span>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="profile-search" class="form-label">Preview a teammate</label>
                                    <input type="search" class="form-control" id="profile-search" placeholder="Search team directory">
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="show-profile" checked>
                                    <label class="form-check-label" for="show-profile">Show my profile in directory</label>
                                </div>

Working preferences

Set your availability and regional defaults.

Preferred work mode 
<div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="start-date" class="form-label">Start date</label>
                                        <input type="date" class="form-control" id="start-date" value="2023-04-17">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="work-time" class="form-label">Daily start time</label>
                                        <input type="time" class="form-control" id="work-time" value="09:00">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="review-week" class="form-label">Planning week</label>
                                        <input type="week" class="form-control" id="review-week" value="2026-W40">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="review-month" class="form-label">Review month</label>
                                        <input type="month" class="form-control" id="review-month" value="2026-09">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="weekly-capacity" class="form-label">Weekly focus hours</label>
                                        <input type="number" class="form-control" id="weekly-capacity" min="1" max="60" value="32">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="reminder-time" class="form-label">Next reminder</label>
                                        <input type="datetime-local" class="form-control" id="reminder-time" value="2026-09-30T09:00">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="week-start" class="form-label">First day of the week</label>
                                        <select class="form-select" id="week-start">
                                            <option>Monday</option>
                                            <option>Sunday</option>
                                            <option>Saturday</option>
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <fieldset>
                                            <legend class="form-label mb-2">Preferred work mode</legend>
                                            <div class="d-flex flex-wrap gap-4">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="work-mode" id="work-mode-office" value="office" checked>
                                                    <label class="form-check-label" for="work-mode-office">Office</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="work-mode" id="work-mode-hybrid" value="hybrid">
                                                    <label class="form-check-label" for="work-mode-hybrid">Hybrid</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="work-mode" id="work-mode-remote" value="remote">
                                                    <label class="form-check-label" for="work-mode-remote">Remote</label>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>

Access and security

Review sign-in and account status fields. 

<div class="mb-3">
                                    <label for="account-password" class="form-label">Current password</label>
                                    <input type="password" class="form-control" id="account-password" value="workspace2026" autocomplete="current-password">
                                </div>
                                <div class="mb-3">
                                    <label for="account-id" class="form-label">Account ID</label>
                                    <input type="text" class="form-control" id="account-id" value="NX-2048-AC" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="account-email-locked" class="form-label">Verified email</label>
                                    <input type="email" class="form-control" id="account-email-locked" value="amelia.hart@example.com" disabled>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="security-updates" checked>
                                    <label class="form-check-label" for="security-updates">Email me about security changes</label>
                                </div>

Ready to update your profile?

Changes are shown here as a form preview.