Input | Bulma-Gomponents

Input

The b.InputText constructor creates a text input. The b.InputPassword constructor creates a password input. The b.InputEmail constructor creates an email input. The b.InputTel constructor creates a telephone number input.

Modifier	Action
`b.Rounded`	Make the input rounded
`b.Hovered`	Apply the hovered style
`b.Focused`	Apply the focused style
`b.Loading`	Add a loading spinner to the right of the input
`b.Static`	Remove specific styling but maintain vertical spacing
`b.Disabled`	Disable the input (apply the `disabled` attribute)
`e.ReadOnly()`	Read only input
`e.Placeholder(string)`	Add a placeholder to the input
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnInput(...any)`	Apply children to the `<input>` element - only useful with the `b.Disabled` modifier if you want to apply the `is-disabled` class to the input instead of using the `disabled` attribute

Bulma examples

Bulma documentation

Example

Code

b.InputText(e.Placeholder("Text input"))

ResultHTML

<input class="input" type="text" placeholder="Text input">

Colors

Bulma documentation

Example

Code

b.InputText(b.Primary, e.Placeholder("Primary input"))

ResultHTML

<input class="input is-primary" type="text" placeholder="Primary input">

Example

Code

b.InputText(b.Link, e.Placeholder("Link input"))

ResultHTML

<input class="input is-link" type="text" placeholder="Link input">

Example

Code

b.InputText(b.Info, e.Placeholder("Info input"))

ResultHTML

<input class="input is-info" type="text" placeholder="Info input">

Example

Code

b.InputText(b.Success, e.Placeholder("Success input"))

ResultHTML

<input class="input is-success" type="text" placeholder="Success input">

Example

Code

b.InputText(b.Warning, e.Placeholder("Warning input"))

ResultHTML

<input class="input is-warning" type="text" placeholder="Warning input">

Example

Code

b.InputText(b.Danger, e.Placeholder("Danger input"))

ResultHTML

<input class="is-danger input" type="text" placeholder="Danger input">

Sizes

Bulma documentation

Example

Code

b.InputText(b.Small, e.Placeholder("Small input"))

ResultHTML

<input class="is-small input" type="text" placeholder="Small input">

Example

Code

b.InputText(b.Normal, e.Placeholder("Normal input"))

ResultHTML

<input class="input is-normal" type="text" placeholder="Normal input">

Example

Code

b.InputText(b.Medium, e.Placeholder("Medium input"))

ResultHTML

<input class="input is-medium" type="text" placeholder="Medium input">

Example

Code

b.InputText(b.Large, e.Placeholder("Large input"))

ResultHTML

<input class="input is-large" type="text" placeholder="Large input">

Styles

Bulma documentation

Example

Code

b.InputText(b.Rounded, e.Placeholder("Rounded input"))

ResultHTML

<input class="input is-rounded" type="text" placeholder="Rounded input">

States

Bulma documentation

Example

Code

b.Control(
	b.InputText(e.Placeholder("Normal input")),
)

ResultHTML

<div class="control"><input class="input" type="text" placeholder="Normal input"></div>

Example

Code

b.Control(
	b.InputText(b.Hovered, e.Placeholder("Hovered input")),
)

ResultHTML

<div class="control"><input class="is-hovered input" type="text" placeholder="Hovered input"></div>

Example

Code

b.Control(
	b.InputText(b.Focused, e.Placeholder("Focused input")),
)

ResultHTML

<div class="control"><input class="input is-focused" type="text" placeholder="Focused input"></div>

Example

Code

b.Control(
	b.Loading,
	b.InputText(e.Placeholder("Loading input")),
)

ResultHTML

<div class="control is-loading"><input class="input" type="text" placeholder="Loading input"></div>

Example

Code

b.Field(
	b.Control(
		b.Small, b.Loading,
		b.InputText(b.Small, e.Placeholder("Small loading input")),
	),
),
b.Field(
	b.Control(
		b.Loading,
		b.InputText(e.Placeholder("Normal loading input")),
	),
),
b.Field(
	b.Control(
		b.Medium, b.Loading,
		b.InputText(b.Medium, e.Placeholder("Medium loading input")),
	),
),
b.Field(
	b.Control(
		b.Large, b.Loading,
		b.InputText(b.Large, e.Placeholder("Large loading input")),
	),
)

ResultHTML

<div class="field"><div class="is-small is-loading control"><input class="input is-small" type="text" placeholder="Small loading input"></div></div>
<div class="field"><div class="control is-loading"><input class="input" type="text" placeholder="Normal loading input"></div></div>
<div class="field"><div class="control is-medium is-loading"><input class="input is-medium" type="text" placeholder="Medium loading input"></div></div>
<div class="field"><div class="control is-large is-loading"><input class="input is-large" type="text" placeholder="Large loading input"></div></div>

Example

Code

b.Control(
	b.InputText(e.Placeholder("Disabled input"), b.Disabled),
)

ResultHTML

<div class="control"><input class="input" type="text" placeholder="Disabled input" disabled></div>

Example

Code

b.Control(
	b.InputText(e.Value("This text is readonly"), e.ReadOnly()),
)

ResultHTML

<div class="control"><input class="input" type="text" value="This text is readonly" readonly></div>

Example

Code

b.Field(
	b.Horizontal,
	b.FieldLabel(
		b.Normal,
		b.Label("From"),
	),
	b.FieldBody(
		b.Field(
			b.Control(
				b.InputEmail(
					b.Static,
					e.Value("me@example.com"),
					e.ReadOnly(),
				),
			),
		),
	),
),
b.Field(
	b.Horizontal,
	b.FieldLabel(
		b.Normal,
		b.Label("To"),
	),
	b.FieldBody(
		b.Field(
			b.Control(
				b.InputEmail(e.Placeholder("Recipient email")),
			),
		),
	),
)

ResultHTML

From

<div class="field is-horizontal"><div class="is-normal field-label"><label class="label">From</label></div><div class="field-body"><div class="field"><div class="control"><input class="input is-static" type="email" value="me@example.com" readonly></div></div></div></div>
<div class="field is-horizontal"><div class="field-label is-normal"><label class="label">To</label></div><div class="field-body"><div class="field"><div class="control"><input class="input" type="email" placeholder="Recipient email"></div></div></div></div>

With Font Awesome icons

Bulma documentation

Example

Code

b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(e.Placeholder("Email")),
		fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
		fa.Icon(fa.Solid, "check", b.Small, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft,
		b.InputPassword(e.Placeholder("Password")),
		fa.Icon(fa.Solid, "lock", b.Small, b.Left),
	),
)

ResultHTML

<div class="field"><div class="control has-icons-left has-icons-right"><input class="input" type="email" placeholder="Email"><span class="is-small icon is-left"><i class="fa-envelope fa-solid"></i></span><span class="is-right icon is-small"><i class="fa-check fa-solid"></i></span></div></div>
<div class="field"><div class="control has-icons-left"><input class="input" type="password" placeholder="Password"><span class="is-small is-left icon"><i class="fa-lock fa-solid"></i></span></div></div>

Example

Code

b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Small, e.Placeholder("Email")),
		fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
		fa.Icon(fa.Solid, "check", b.Small, b.Right),
	),
)

ResultHTML

<div class="field"><div class="control has-icons-left has-icons-right"><input class="is-small input" type="email" placeholder="Email"><span class="is-left is-small icon"><i class="fa-envelope fa-solid"></i></span><span class="is-small is-right icon"><i class="fa-solid fa-check"></i></span></div></div>

Example

Code

b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(e.Placeholder("Email")),
		fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
		fa.Icon(fa.Solid, "check", b.Small, b.Right),
	),
)

ResultHTML

<div class="field"><div class="control has-icons-left has-icons-right"><input class="input" type="email" placeholder="Email"><span class="is-small is-left icon"><i class="fa-solid fa-envelope"></i></span><span class="icon is-small is-right"><i class="fa-solid fa-check"></i></span></div></div>

Example

Code

b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Medium, e.Placeholder("Email")),
		fa.Icon(fa.Solid, "envelope", b.Left),
		fa.Icon(fa.Solid, "check", b.Right),
	),
)

ResultHTML

<div class="field"><div class="control has-icons-left has-icons-right"><input class="input is-medium" type="email" placeholder="Email"><span class="icon is-left"><i class="fa-solid fa-envelope"></i></span><span class="is-right icon"><i class="fa-solid fa-check"></i></span></div></div>

Example

Code

b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Large, e.Placeholder("Email")),
		fa.Icon(fa.Solid, "envelope", b.Medium, b.Left),
		fa.Icon(fa.Solid, "check", b.Medium, b.Right),
	),
)

ResultHTML

<div class="field"><div class="has-icons-left has-icons-right control"><input class="input is-large" type="email" placeholder="Email"><span class="is-left icon is-medium"><i class="fa-solid fa-envelope"></i></span><span class="is-medium is-right icon"><i class="fa-solid fa-check"></i></span></div></div>