Skip to main content

Row

Group field on a single row

Usage​

If you want to create equal columns you can simply use an array of fields

Row([
  Text('label', { label: 'Label', default: 'Call to action' }),
  Text('url', { label: 'Link' }),
  Select('type', {
    default: 'primary',
    label: 'type',
    options: [
      { label: 'Primary', value: 'primary' },
      { label: 'Secondary', value: 'secondary' },
    ],
  }),
])

You can also specify the ratio of each column using a string that works like the grid-template-columns CSS

Row([
  Text('label', { label: 'Label', default: 'Call to action' }),
  Text('url', { label: 'Link' }),
], {
  label: 'Button',
  columns: '30% 70%' // uses https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
})

Preview​