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.
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> <Radio name="group"> Option B </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>
Input
A Bulma-styled text input supporting color, size, rounded, static/read-only, and loading states. Suitable for all standard text input types.
<Input placeholder="Your name" />
TextArea
A Bulma-styled multi-line text input. Supports color, size, rounded, static/read-only, and fixed size.
<TextArea placeholder="Your message" rows={4} />
Select
A Bulma-styled dropdown for single or multiple selections. Supports color, size, rounded, loading, and multiselect.
<Select> <option value="">Please select</option> <option value="option1">Option 1</option> </Select>
File
A Bulma-styled file input with support for color, size, boxed/fullwidth/align styles, icons, and filename display.
<File label="Choose a file..." />
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>
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.