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/read-only, 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="you@example.com" iconLeftName="envelope" message="We'll never share your email" messageColor="info" />
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, rounded, static/read-only, 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" />
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> ); }
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>
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>
Radio
A Bulma-styled radio button for mutually exclusive choices. Use the same name prop for grouping.
<Radio name="group"> Option A </Radio>
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>
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>
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> ); }
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> ); }
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> ); }
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> ); }
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 — supports 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> ); }
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> ); }
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" />
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> ); }
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..." />
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="you@example.com" /> </Field>
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>
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.