Input

The text input and its variations

To use an Input component in your application, you need to import the BulmaInputModule by adding the following lines to your app.module.ts file.

import { BulmaInputModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaInputModule]
  // ...
})
export class AppModule {}

Basic

To display the Input component in your Angular application, add the buInput directive in the <input> tag. The <input> tag supports following type sttributes:

  • type="text"
  • type="password"
  • type="email"
  • type="tel"
Directive Description
buInput For displaying an input element as Bulma input
Properties Description
theme Set the theme of the Input
size Set the size of the Input
hovered Set the hover state of the Input, default value is false
focus Set the focus state of the Input, default value is false
rounded Make the edges rounded, giving the Input a capsule like shape, default value is false

Sizes

You can set the size of the input using one the 4 size options:

  • small
  • normal
  • medium
  • large

<input type="text" buInput size="small" placeholder="Small input" />
<input type="text" buInput placeholder="Normal input" />
<input type="text" buInput size="medium" placeholder="Medium input" />
<input type="text" buInput size="large" placeholder="Large input" />

States

  • To define the hovered state of the input, set the hovered property to true.
  • To define the focused state of the input, set the focus property to true.

Normal

Hover

Focus

<input type="text" buInput placeholder="Normal input" />
<input type="text" buInput hovered="true" placeholder="Hovered input" />
<input type="text" buInput focus="true" placeholder="Focused input" />

Themes

You can change the theme of the input using one the 8 theme options:

  • black
  • dark
  • primary
  • link
  • info
  • success
  • warning
  • danger

<input type="text" buInput placeholder="Normal input" />
<input type="text" buInput theme="black" placeholder="Black input" />
<input type="text" buInput theme="dark" placeholder="Dark input" />
<input type="text" buInput theme="primary" placeholder="Primary input" />
<input type="text" buInput theme="link" placeholder="Link input" />
<input type="text" buInput theme="info" placeholder="Info input" />
<input type="text" buInput theme="success" placeholder="Success input" />
<input type="text" buInput theme="warning" placeholder="Warning input" />
<input type="text" buInput theme="danger" placeholder="Danger input" />

Styles

To make the edges round and give the input a capsule like shape, set the rounded property to true.


<input type="text" buInput rounded="true" placeholder="Rounded input" />
<input type="text" buInput theme="primary" rounded="true" placeholder="Rounded primary input" />
<input type="text" buInput theme="info" rounded="true" placeholder="Rounded info input" />
<input type="text" buInput theme="success" rounded="true" placeholder="Rounded success input" />
<input type="text" buInput theme="warning" rounded="true" placeholder="Rounded warning input" />
<input type="text" buInput theme="danger" rounded="true" placeholder="Rounded danger input" />