RadioButton

live example

Explore the API in the live example.

api reference

RadioButton(name[, parent])

The radio button control widget. Inherits all API from the [Widget] ../components/widget.html component. All the radio buttons are constrained to a rectangle defined by the width/height and the margins. The labels are bounded by the available space (widget width minus the side margins).

Parameters

Name	Type	Description
name	string	Name of the widget. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

RadioButton.callback(callback)

Binds a callback to the radio buttons.

Parameters

Name	Type	Description
callback	Function	Function to call when a radio button is selected. The label of the radio button is passed to the method as parameter.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Bind method to the buttons.
const radio = dalian.RadioButton('my-control')
  .callback(console.log)
  .render()

// Remove callback.
radio.callback()
  .render()

RadioButton.color([color])

Sets the radio button color.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `grey`.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Set color.
const radio = dalian.RadioButton('my-control')
  .color('yellowgreen')
  .render()

// Reset color.
radio.color()
  .render()

RadioButton.columns([columns])

Sets the number of columns for the radio buttons.

Parameters

Name	Type	Description
columns	number	optionalNumber of columns to set. Default value is `1`.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Set columns to 2.
const radio = dalian.RadioButton('my-control')
  .columns(2)
  .render()

// Reset to single column.
radio.columns()
  .render()

RadioButton.disable([on])

Disables/enables the radio buttons. If disabled, the buttons cannot be interacted with.

Parameters

Name	Type	Description
on	boolean	optionalWhether to disable the buttons or not. Default value is `false`.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Disable buttons.
const radio = dalian.RadioButton('my-control')
  .disable(true)
  .render()

// Enable buttons.
radio.disable()
  .render()

RadioButton.entries([labels])

Sets the entries for the radio buttons. Note that the entry values are used as the labels as well.

Parameters

Name	Type	Description
labels	string[]	optionalArray of entries representing the radio buttons. Default value is `[]`.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Set entries.
const radio = dalian.RadioButton('my-control')
  .entries(['A', 'B', 'C'])
  .render()

// Update entries.
radio.entries(['D', 'E'])
  .render()

RadioButton.hSep([length])

Sets the horizontal separation between the buttons. The separation is measured between the center of the radio markers and the labels fill the available space defined by the widget width and the margins. If it is set to null or undefined, the columns are positioned uniformly horizontally.

Parameters

Name	Type	Description
length	number, null	optionalSize of the horizontal separation in units of the current font size. Default value is `0`.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Set horizontal separation to 2 em.
const radio = dalian.RadioButton('my-control')
  .hSep(2)
  .render()

// Reset horizontal separation to 0.
radio.hSep()
  .render()

RadioButton.select(entry)

Selects a radio button or removes selection from all buttons. Note that this method does not trigger the callback, only updates the buttons.

Parameters

Name	Type	Description
entry	string	Radio button to select. If an invalid entry is passed, none of the buttons are selected.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Select the second button.
const radio = dalian.RadioButton('my-control')
  .entries(['25%', '50%', '75%', '100%'])
  .select('50%')
  .render()

// Remove selection.
radio.select()
  .render()

RadioButton.vSep([length])

Sets the vertical separation between the buttons. The separation is measured between the center of the ratio markers. Note that the entries fill in the space defined by the widget height and the margins.

Parameters

Name	Type	Description
length	number	optionalSize of the vertical separation in units of the current font size. Default value is `0`.

Returns

RadioButton

Reference to the RadioButton API.

Examples

// Set vertical separation to 2 em.
const radio = dalian.RadioButton('my-control')
  .vSep(2)
  .render()

// Reset vertical separation to 0.
radio.vSep()
  .render()