Forms

Overview

MiniKit styles native HTML form controls instead of introducing custom components. This keeps forms lightweight, accessible, and framework agnostic while preserving familiar browser behavior.

Inputs, textareas, selects, checkboxes, radios, switches, file inputs, date pickers, range sliders, progress indicators, and validation states are all styled automatically.

Field Structure

MiniKit recommends grouping each control with its label and optional helper text using native HTML.

<label>
  Name
  <input
    type="text"
    placeholder="Enter your name"/>
</label>

Native labels provide the best accessibility and require no additional MiniKit attributes.

Email Input

Email inputs provide built-in browser validation and optimized keyboards on mobile devices.

<label>
  Email
  <input
    type="email"
    placeholder="you@example.com"/>
</label>

Prefer the email input type over a generic text field whenever possible.

Password

Password fields should communicate requirements before the user submits the form.

<label>
  Password

  <input
    type="password"
    aria-describedby="password-hint"/>

  <small id="password-hint">
    Must contain at least 8 characters.
  </small>
</label>

Associate helper text using aria-describedby.

Validation

MiniKit styles native browser validation while allowing custom validation messages using standard accessibility attributes.

<label>
  Email

  <input
    type="email"
    value="invalid-email"
    aria-invalid="true"
    aria-describedby="email-error"/>

  <small id="email-error">
    Please enter a valid email address.
  </small>
</label>

Mark invalid fields using aria-invalid="true" and associate the error message using aria-describedby.

Textarea

Use a textarea for multi-line user input such as comments, messages, and descriptions.

<label>
  Message

  <textarea
    rows="4"
    placeholder="Your message..."></textarea>
</label>

Select

Select menus allow users to choose a single option from a predefined list.

<select>
  <option>Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Checkbox

Checkboxes allow users to enable one or more independent options.

<label>
  <input type="checkbox" />
  Accept terms and conditions
</label>

Radio Group

Radio buttons allow users to select exactly one option from a related group.

<fieldset>
  <legend>Preferred Plan</legend>

  <label>
    <input type="radio" name="plan"/>
    Starter
  </label>

  <label>
    <input type="radio" name="plan"/>
    Professional
  </label>

  <label>
    <input type="radio" name="plan"/>
    Enterprise
  </label>
</fieldset>

Always group related radio buttons using <fieldset> and <legend>.

File Input

File inputs allow users to upload files using the browser's native file picker.

<label>
  Upload File

  <input type="file"/>
</label>

Date Input

Date inputs use the browser's native calendar picker.

<label>
  Date

  <input type="date"/>
</label>

Date & Time

Use a datetime input when both a date and time are required.

<label>
  Meeting Time

  <input type="datetime-local"/>
</label>

The browser provides a native interface for selecting both values together.

Range Slider

Range sliders allow users to select a numeric value within a fixed range. They are commonly used for settings such as volume, brightness, or zoom.

<label>
  Volume

  <input
    type="range"
    min="0"
    max="100"
    value="50"/>

  <small>
    Adjust the output volume.
  </small>
</label>

Configure the slider using the min, max, and value attributes.

Switch

Switches represent settings that can be turned on or off immediately. They are implemented using a checkbox with role="switch".

<label>
  Enable notifications

  <input
    type="checkbox"
    role="switch"/>

  <small>
    Receive email notifications.
  </small>
</label>

Use switches for settings that take effect immediately. Use checkboxes for options submitted with a form.

States

MiniKit supports the browser's native disabled, readonly, required and invalid states.

<input type="text" value="Disabled input" disabled/>
<input type="text" value="Readonly input" readonly/>
<input type="email" placeholder="Required field" required/>

Complete Form

A complete form combines multiple field types while preserving native HTML semantics and accessibility.

<form>
  <label>
    Full Name
    <input type="text" placeholder="John Doe"/>
  </label>

  <label>
    Email Address
    <input type="email" placeholder="john@example.com"/>
  </label>

  <label>
    Message
    <textarea rows="4"></textarea>
  </label>

  <label>
    <input type="checkbox"/>
    Subscribe to updates
  </label>

  <button type="submit">
    Submit
  </button>
</form>

Accessibility

MiniKit relies on native HTML form controls, preserving browser accessibility while providing consistent styling.

• Always associate every form control with a visible <label>.
• Use aria-describedby to associate helper text or error messages with a control.
• Mark invalid controls using aria-invalid="true".
• Group related radio buttons using <fieldset> and <legend>.
• Do not rely solely on placeholder text to identify a field.
• Use meaningful button labels such as Save Changes or Create Account.
• Prefer native HTML validation whenever possible.

API