从一组互斥选项中选择一个选项。适合单选题和设置场景。
<flux:radio.group wire:model="payment" label="Select your payment method"> <flux:radio value="cc" label="Credit Card" checked /> <flux:radio value="paypal" label="Paypal" /> <flux:radio value="ach" label="Bank transfer" /></flux:radio.group>将每个单选按钮的描述直接对齐在其标签下方。
<flux:radio.group label="Role"> <flux:radio name="role" value="administrator" label="Administrator" description="Administrator users can perform any action." checked /> <flux:radio name="role" value="editor" label="Editor" description="Editor users have the ability to read, create, and update." /> <flux:radio name="role" value="viewer" label="Viewer" description="Viewer users only have the ability to read. Create, and update are restricted." /></flux:radio.group>将单选输入组合在字段集内，并为每个单选选项提供带描述的更多上下文。
<flux:fieldset> <flux:legend>Role</flux:legend> <flux:radio.group> <flux:radio value="administrator" label="Administrator" description="Administrator users can perform any action." checked /> <flux:radio value="editor" label="Editor" description="Editor users have the ability to read, create, and update." /> <flux:radio value="viewer" label="Viewer" description="Viewer users only have the ability to read. Create, and update are restricted." /> </flux:radio.group></flux:fieldset>标准单选按钮的更紧凑替代方案。
<flux:radio.group wire:model="role" label="Role" variant="segmented"> <flux:radio label="Admin" /> <flux:radio label="Editor" /> <flux:radio label="Viewer" /></flux:radio.group>您也可以使用 size="sm" 属性来使单选按钮更小。
<flux:radio.group wire:model="role" label="Role" variant="segmented" size="sm"> <flux:radio label="Admin" /> <flux:radio label="Editor" /> <flux:radio label="Viewer" /></flux:radio.group>将分段式单选按钮与图标前缀结合。
<flux:radio.group wire:model="role" variant="segmented"> <flux:radio label="Admin" icon="wrench" /> <flux:radio label="Editor" icon="pencil-square" /> <flux:radio label="Viewer" icon="eye" /></flux:radio.group>标准单选按钮的边框替代方案。
<flux:radio.group wire:model="shipping" label="Shipping" variant="cards" class="max-sm:flex-col"> <flux:radio value="standard" label="Standard" description="4-10 business days" checked /> <flux:radio value="fast" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" label="Next day" description="1 business day" /></flux:radio.group>您可以根据视口有条件地应用 flex-col 在垂直和水平卡片布局之间切换。
<flux:radio.group ... class="max-sm:flex-col"> <!-- ... --></flux:radio.group>您可以通过简单地向组容器添加 flex-col 类来垂直排列一组单选卡片。
<flux:radio.group label="Shipping" variant="cards" class="flex-col"> <flux:radio value="standard" label="Standard" description="4-10 business days" /> <flux:radio value="fast" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" label="Next day" description="1 business day" /></flux:radio.group>将单选卡片与图标结合使用。
<flux:radio.group label="Shipping" variant="cards" class="max-sm:flex-col"> <flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" /> <flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" /></flux:radio.group>为了获得更清洁的外观，您可以使用 :indicator="false" 移除单选指示器。
<flux:radio.group label="Shipping" variant="cards" :indicator="false" class="max-sm:flex-col"> <flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" /> <flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" /></flux:radio.group>您可以通过 flux:radio 组件插槽来组合您自己的自定义卡片。
4-10个工作日
2-5个工作日
1个工作日
<flux:radio.group label="Shipping" variant="cards" class="max-sm:flex-col"> <flux:radio value="standard" checked> <flux:radio.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Standard</flux:heading> <flux:text size="sm" class="mt-2">4-10 business days</flux:text> </div> </flux:radio> <flux:radio value="fast"> <flux:radio.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Fast</flux:heading> <flux:text size="sm" class="mt-2">2-5 business days</flux:text> </div> </flux:radio> <flux:radio value="next-day"> <flux:radio.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Next day</flux:heading> <flux:text size="sm" class="mt-2">1 business day</flux:text> </div> </flux:radio></flux:radio.group>紧凑、圆角的单选按钮，看起来像标签或徽章。非常适合筛选器、分类以及任何您希望轻量级可选择选项的场景。
<flux:radio.group wire:model="priority" label="Priority" variant="pills"> <flux:radio value="low" label="Low" /> <flux:radio value="medium" label="Medium" /> <flux:radio value="high" label="High" /> <flux:radio value="critical" label="Critical" /></flux:radio.group>按钮风格的单选选项，看起来像工具栏。非常适合动作选择和分组控件，当您希望更突出的视觉风格时。
<flux:radio.group variant="buttons" class="w-full *:flex-1" label="Feedback type"> <flux:radio icon="bug-ant" checked>Bug report</flux:radio> <flux:radio icon="light-bulb">Suggestion</flux:radio> <flux:radio icon="question-mark-circle">Question</flux:radio></flux:radio.group>|
属性
|
描述
|
|---|---|
| wire:model |
将单选组选择绑定到 Livewire 属性。请参阅 wire:model 文档 获取更多信息。
|
| label | |
| description | |
| variant |
组的视觉风格。选项：default、segmented、cards、pills、buttons。
|
| invalid |
将错误样式应用于单选组。
|
|
插槽
|
描述
|
|---|---|
| default |
要组合在一起的单选按钮。
|
|
属性
|
描述
|
|---|---|
| data-flux-radio-group |
应用于根元素的样式和标识。
|