Column UI components examples

Column

A dual-pane calendar component for selecting a date range, featuring quick selection presets on the right.

• Datepicker

Column

A dual-calendar date range picker with a sidebar for quick preset selections.

• Datepicker

Column

An inline error alert component displaying a validation message and a 'Create' action button. It features a red border, a red error icon, and grey text.

• Alert

Column

A form field for entering a maximum principal balance, featuring a dollar sign prefix, a placeholder for the amount, and a currency selector dropdown.

• Input amount

Column

A form input field for entering a monetary amount, featuring a currency symbol prefix and a currency selector dropdown.

• Input amount

Column

A radio group component for selecting a payment method. It features a section title with a checkmark icon, a label, and three horizontal radio button options styled as cards.

• Checkbox & radio

Column

An empty state message indicating no transfers were found, accompanied by a row of four primary action buttons to create different types of transfers.

• Button group

Column

A phone number input field with an expanded dropdown menu for selecting the country code. The dropdown includes a search bar and a list of countries with their respective dialing codes.

• Input phone number

Column

A form field for entering a phone number, featuring a country code selector and placeholder text.

• Input phone number

Column

A combobox input for selecting an event type, shown in an expanded state with a search filter and one matching result. A 'Send' button is positioned alongside it.

• Input select

Column

A full-width success banner indicating a webhook was successfully added. It features a green checkmark icon, a text message, and a close button.

• Message

Column

An open combobox dropdown menu featuring a search input at the top and a list of selectable event types below.

• Input select