Input

Overview

The Input component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states, and all Bulma helper props. It is suitable for all standard text input types.

Import

import { Input, Field, Control } from '@allxsmith/bestax-bulma';

Props

Prop	Type	Description
`color`	`'primary' \| 'link' \| ... \| 'white'`	Bulma color modifier.
`size`	`'small' \| 'medium' \| 'large'`	Size modifier.
`isRounded`	`boolean`	Rounded input corners.
`isStatic`	`boolean`	Renders input as static (read only, styled).
`isHovered`	`boolean`	Applies hovered state.
`isFocused`	`boolean`	Applies focused state.
`isLoading`	`boolean`	Shows loading indicator.
`className`	`string`	Additional CSS classes.
`disabled`	`boolean`	Disabled input.
`readOnly`	`boolean`	Read-only input.
...	All standard `<input>` and Bulma helper props	(See Helper Props)

Usage

Default Input

<Field label="Default">
  <Control>
    <Input placeholder="Default input" />
  </Control>
</Field>

Color Inputs

<Field label="Primary">
  <Control>
    <Input color="primary" placeholder="Primary input" />
  </Control>
</Field>

<Field label="Link">
  <Control>
    <Input color="link" placeholder="Link input" />
  </Control>
</Field>

<Field label="Info">
  <Control>
    <Input color="info" placeholder="Info input" />
  </Control>
</Field>

<Field label="Success">
  <Control>
    <Input color="success" placeholder="Success input" />
  </Control>
</Field>

<Field label="Warning">
  <Control>
    <Input color="warning" placeholder="Warning input" />
  </Control>
</Field>

<Field label="Danger">
  <Control>
    <Input color="danger" placeholder="Danger input" />
  </Control>
</Field>

Sizes

<Field label="Small">
  <Control>
    <Input size="small" placeholder="Small input" />
  </Control>
</Field>

<Field label="Normal">
  <Control>
    <Input placeholder="Normal input" />
  </Control>
</Field>

<Field label="Medium">
  <Control>
    <Input size="medium" placeholder="Medium input" />
  </Control>
</Field>

<Field label="Large">
  <Control>
    <Input size="large" placeholder="Large input" />
  </Control>
</Field>

Style: Rounded

<Field label="Rounded">
  <Control>
    <Input isRounded placeholder="Rounded input" />
  </Control>
</Field>

States

<Field label="Normal">
  <Control>
    <Input placeholder="Normal state" />
  </Control>
</Field>

<Field label="Hover">
  <Control>
    <Input isHovered placeholder="Hovered state" />
  </Control>
</Field>

<Field label="Focus">
  <Control>
    <Input isFocused placeholder="Focused state" />
  </Control>
</Field>

<Field label="Loading">
  <Control isLoading>
    <Input placeholder="Loading state" />
  </Control>
</Field>

Loading States by Size

<Field label="Loading Small">
  <Control isLoading size="small">
    <Input size="small" placeholder="Loading small" />
  </Control>
</Field>

<Field label="Loading Normal">
  <Control isLoading>
    <Input placeholder="Loading normal" />
  </Control>
</Field>

<Field label="Loading Medium">
  <Control isLoading size="medium">
    <Input size="medium" placeholder="Loading medium" />
  </Control>
</Field>

<Field label="Loading Large">
  <Control isLoading size="large">
    <Input size="large" placeholder="Loading large" />
  </Control>
</Field>

Disabled & Read Only

<Field label="Disabled">
  <Control>
    <Input disabled placeholder="Disabled input" />
  </Control>
</Field>

<Field label="Read Only">
  <Control>
    <Input readOnly value="Read only value" />
  </Control>
</Field>

Static State

<Field horizontal label="Username">
  <Control>
    <Input isStatic value="Static value" />
  </Control>
</Field>
<Field horizontal label="Password">
  <Control>
    <Input placeholder="Editable value" />
  </Control>
</Field>

With Icons (Left and Right)

<Field>
  <Control
    hasIconsLeft
    hasIconsRight
    iconLeft={{ name: 'user' }}
    iconRight={{ name: 'check' }}
  >
    <Input placeholder="With icons" />
  </Control>
</Field>

<Field>
  <Control
    hasIconsLeft
    hasIconsRight
    iconLeft={{ name: 'envelope' }}
    iconRight={{ name: 'exclamation-triangle' }}
  >
    <Input placeholder="Another input" />
  </Control>
</Field>

With Icons and Size Variations

<Field>
  <Control
    hasIconsLeft
    hasIconsRight
    size="small"
    iconLeft={{ name: 'user', size: 'small' }}
    iconRight={{ name: 'check', size: 'small' }}
  >
    <Input size="small" placeholder="Icons left/right small" />
  </Control>
</Field>

<Field>
  <Control
    hasIconsLeft
    hasIconsRight
    iconLeft={{ name: 'user' }}
    iconRight={{ name: 'check' }}
  >
    <Input placeholder="Icons left/right normal" />
  </Control>
</Field>

<Field>
  <Control
    hasIconsLeft
    hasIconsRight
    size="medium"
    iconLeft={{ name: 'user', size: 'medium' }}
    iconRight={{ name: 'check', size: 'medium' }}
  >
    <Input size="medium" placeholder="Icons left/right medium" />
  </Control>
</Field>

<Field>
  <Control
    hasIconsLeft
    hasIconsRight
    size="large"
    iconLeft={{ name: 'user', size: 'large' }}
    iconRight={{ name: 'check', size: 'large' }}
  >
    <Input size="large" placeholder="Icons left/right large" />
  </Control>
</Field>

Accessibility

Always provide a <label> (use with Field) for accessible input usage.
Use the correct input type for semantics (text, email, etc.).

Control: For icons and loading.
Field: For field grouping and labels.

Overview​

Import​

Props​

Usage​

Default Input​

Color Inputs​

Sizes​

Style: Rounded​

States​

Loading States by Size​

Disabled & Read Only​

Static State​

With Icons (Left and Right)​

With Icons and Size Variations​

Accessibility​

Related Components​

Additional Resources​