Skip to main content

Form Components

This page provides a summary of all Bulma-styled form components in Bestax, with a brief description, usage example, and links to full documentation for each. Use these components to build accessible, flexible, and visually consistent forms.

Text Inputs​

Input​

A Bulma-styled text input supporting color, size, rounded, static, and loading states. Pass label, iconLeftName/iconRightName, and message/messageColor to auto-wrap with a Field and Control — no extra boilerplate.

<Input
  label="Email"
  placeholder="[email protected]"
  iconLeftName="envelope"
  message="We'll never share your email"
  messageColor="info"
/>

View full documentation.

Escape hatch

For complex layouts (grouped fields, addons, horizontal forms), use InputBase with an explicit Field + Control wrapper.

TextArea​

A Bulma-styled multi-line text input. Supports color, size, and fixed size. Also accepts label, message, and messageColor for one-stop field usage.

<TextArea
  label="Comments"
  placeholder="Tell us your thoughts..."
  rows={3}
  message="Max 500 characters"
  messageColor="info"
/>

View full documentation.

Escape hatch

For complex layouts, use TextAreaBase with an explicit Field + Control wrapper.

Autocomplete​

Input with dropdown suggestions. Filters options based on user input with keyboard navigation.

function AutocompleteExample() {
  const [selected, setSelected] = React.useState(null);
  const fruits = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
  ];
  return (
    <div>
      <Autocomplete
        data={fruits}
        placeholder="Search fruit..."
        onSelect={setSelected}
        openOnFocus
        clearable
      />
      {selected && <p className="mt-2">Selected: {selected}</p>}
    </div>
  );
}

View full documentation.

Selection​

Checkbox​

A Bulma-styled checkbox input for boolean choices. Pass the label as children; supports custom JSX and links.

<Checkbox> Stay Signed In </Checkbox>

View full documentation.

Checkboxes​

Wraps multiple Checkbox components in a vertical group for lists of boolean options (e.g., preferences, to-do lists).

<Checkboxes>
  <Checkbox> Option 1 </Checkbox>
  <Checkbox> Option 2 </Checkbox>
</Checkboxes>

View full documentation.

Radio​

A Bulma-styled radio button for mutually exclusive choices. Use the same name prop for grouping.

<Radio name="group"> Option A </Radio>

View full documentation.

Radios​

Groups multiple Radio components vertically for single-choice lists (e.g., RSVP, selection lists).

<Radios>
  <Radio name="event"> Attend </Radio>
  <Radio name="event"> Decline </Radio>
</Radios>

View full documentation.

Select​

A Bulma-styled dropdown for single or multiple selections. Supports color, size, rounded, loading, and multiselect. Accepts label, iconLeftName, and message/messageColor to auto-wrap with Field and Control.

<Select label="Country" iconLeftName="globe">
  <option>United States</option>
  <option>Canada</option>
  <option>United Kingdom</option>
</Select>

View full documentation.

Escape hatch

For complex layouts, use SelectBase with an explicit Field + Control wrapper.

Switch​

Toggle switch for on/off states. A styled checkbox that appears as a toggle, commonly used for settings.

function SwitchExample() {
  const [enabled, setEnabled] = React.useState(false);
  return (
    <div>
      <Switch
        checked={enabled}
        onChange={e => setEnabled(e.target.checked)}
        color="success"
        isRounded
      >
        Enable notifications
      </Switch>
      <p className="mt-2 has-text-grey">
        Status: {enabled ? 'Enabled' : 'Disabled'}
      </p>
    </div>
  );
}

View full documentation.

Number / Range​

Numberinput​

Number input with increment/decrement buttons. Provides +/- buttons for easy value adjustment.

function NumberinputExample() {
  const [quantity, setQuantity] = React.useState(1);
  return (
    <div>
      <Numberinput
        value={quantity}
        onChange={setQuantity}
        min={1}
        max={10}
        color="primary"
      />
      <p className="mt-2">Quantity: {quantity}</p>
    </div>
  );
}

View full documentation.

Slider​

Range slider for selecting values. Supports different sizes, colors, and optional value display.

function SliderExample() {
  const [value, setValue] = React.useState(50);
  return (
    <div>
      <Slider
        value={value}
        onChange={setValue}
        min={0}
        max={100}
        showOutput
        color="primary"
        isRounded
      />
      <p className="mt-2">Value: {value}</p>
    </div>
  );
}

View full documentation.

Rate​

Star/icon-based rating component. Supports custom icons, sizes, and text labels.

function RateExample() {
  const [rating, setRating] = React.useState(3);
  return (
    <div>
      <Rate
        value={rating}
        onChange={setRating}
        showScore
        showText
        texts={['Poor', 'Fair', 'Average', 'Good', 'Excellent']}
      />
    </div>
  );
}

View full documentation.

Date & Time​

DateInput​

A date input that opens a popover calendar, with segmented keyboard entry directly in the field. Built on native Date and Intl only, it supports month and year pickers, min/max bounds, disabled-date predicates, custom formats, locales, an inline mode, and a native fallback on touch devices.

function DateInputExample() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DateInput
        label="Date"
        placeholder="YYYY-MM-DD"
        value={date}
        onChange={setDate}
      />
      <p className="mt-2">Selected: {date ? date.toDateString() : '—'}</p>
    </div>
  );
}

View full documentation.

DateRangeInput​

A start and end date in one field: two segmented inputs and one popover calendar that picks the start and then the end, previewing the range on the way. min, max and the disabled-date props apply to both ends, and the range submits with a form as two dates.

function DateRangeInputExample() {
  const [range, setRange] = React.useState([null, null]);
  const [start, end] = range;
  return (
    <div>
      <DateRangeInput
        label="Stay"
        placeholder="YYYY-MM-DD"
        value={range}
        onChange={setRange}
      />
      <p className="mt-2">
        {start ? start.toDateString() : 'No start'} to{' '}
        {end ? end.toDateString() : 'no end'}
      </p>
    </div>
  );
}

View full documentation.

TimeInput​

A time-of-day input that opens a popover wheel spinner, with segmented keyboard entry directly in the field. Supports 12/24-hour formats, optional seconds, custom increments, min/max bounds, and a native fallback on touch devices.

function TimeInputExample() {
  const [time, setTime] = React.useState(null);
  return (
    <div>
      <TimeInput
        label="Time"
        placeholder="HH:MM AM"
        hourFormat="12"
        value={time}
        onChange={setTime}
      />
      <p className="mt-2">Selected: {time ? time.toLocaleTimeString() : '—'}</p>
    </div>
  );
}

View full documentation.

DateTimeInput​

Combines the calendar and time wheels in a single popover with an iOS-style footer — the selected time, a Reset button, and a ✓ confirm button. Click the time to float the wheel spinner over the calendar. Supports the full prop surface of both DateInput and TimeInput.

<DateTimeInput label="Appointment" placeholder="YYYY-MM-DD HH:MM" />

View full documentation.

Tags​

Taginput​

Tag/chip input field for managing multiple tags. Supports autocomplete suggestions and custom styling.

function TaginputExample() {
  const [tags, setTags] = React.useState(['React', 'TypeScript']);
  const suggestions = [
    'React',
    'Vue',
    'Angular',
    'Svelte',
    'TypeScript',
    'JavaScript',
  ];
  return (
    <div>
      <Taginput
        value={tags}
        onChange={setTags}
        data={suggestions}
        placeholder="Add frameworks..."
        tagColor="primary"
      />
      <p className="mt-2 has-text-grey">Tags: {tags.join(', ')}</p>
    </div>
  );
}

View full documentation.

File Upload​

File​

A Bulma-styled file input with support for color, size, boxed/fullwidth/align styles, icons, and filename display.

<File label="Choose a file..." />

View full documentation.

Layout​

Field​

A Bulma-styled form field container for labels, grouped controls, and horizontal layouts. Compose labeled, grouped, or horizontal form layouts.

<Field label="Email">
  <Input placeholder="[email protected]" />
</Field>

View full documentation.

tip

Use Field to group and label form controls for accessibility and layout.

Control​

A Bulma-styled wrapper for form controls, providing consistent spacing, icon placement, and loading indicators.

<Control>
  <Input placeholder="Username" />
</Control>

An Input inside a Control renders no Control of its own, and no Field either, so it stays the Control's own child. Its Control-level props, such as isLoading and the icon props, belong on that Control: given to the Input there, they do nothing and warn in development. To give it a label, message, horizontal layout or fieldClassName, wrap the Control in a Field and set the label, horizontal and class name on that Field. Without that Field, any of those props makes the Input render its own Field inside the Control, and it warns in development.

View full documentation.

tip

Wrap inputs, selects, or textareas in Control for proper Bulma styling and icon support.

For more details and advanced usage, see the full documentation for each component linked above.